I stumbled upon a great example showcasing how to scroll a div on my page:
Check out this Codepen - https://codepen.io/zheisey/pen/xxGbEOx
Although, I am looking to extend this functionality to allow multiple divs to scroll together. Any suggestions?
I attempted adding '.scrolling-wrapper2', but unfortunately, the scrolling function didn't work on my second wrapper.
const slider = document.querySelector('.scrolling-wrapper, .scrolling-wrapper2');
Find the full code below -
<div class="scrolling-wrapper">
<div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div>
</div>
<div class="scrolling-wrapper scrolling-wrapper2">
<div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div>
</div>
<style>
.scrolling-wrapper {
display: flex;
flex-wrap: no-wrap;
overflow-x: auto;
cursor: grab;
}
.scrolling-wrapper.active {
cursor: grabbing;
}
.scrolling-wrapper[data-dragging="true"] a {
pointer-events: none;
}
.card {
color: white;
background-color: tomato;
font-family: monospace;
width: 200px;
height: 200px;
margin-right: 1rem;
flex: 0 0 auto;
/* Centering text only */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
</style>
<script>
const slider = document.querySelector('.scrolling-wrapper, .scrolling-wrapper2');
let isDown = false;
let startX;
let scrollLeft;
slider.addEventListener('mousedown', (e) => {
let rect = slider.getBoundingClientRect();
isDown = true;
slider.classList.add('active');
// Get initial mouse position
startX = e.pageX - rect.left;
// Get initial scroll position in pixels from left
scrollLeft = slider.scrollLeft;
console.log(startX, scrollLeft);
});
slider.addEventListener('mouseleave', () => {
isDown = false;
slider.dataset.dragging = false;
slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
isDown = false;
slider.dataset.dragging = false;
slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
if (!isDown) return;
let rect = slider.getBoundingClientRect();
e.preventDefault();
slider.dataset.dragging = true;
// Get new mouse position
const x = e.pageX - rect.left;
// Determine distance the mouse has moved (new mouse position minus initial mouse position)
const walk = (x - startX);
// Adjust the scroll position of the slider from the left (amount the mouse has moved minus the original scroll position)
slider.scrollLeft = scrollLeft - walk;
console.log(x, walk, slider.scrollLeft);
});
</script>