I have been working on a unique horizontal website design that allows users to scroll horizontally by dragging the screen. I managed to successfully implement the horizontal scrolling feature, but I am facing difficulties in adding the horizontal drag-to-scroll functionality. To clarify, this means users should be able to drag the screen horizontally to navigate the content. You can view an example of what I'm aiming for here.
Unfortunately, my JavaScript code does not seem to enable the dragging function as intended, although the scrolling works fine, as demonstrated in the example provided.
Here is the snippet of my code:
// script.js
const slider = document.querySelector('.wrapper');
let isDown = false;
let startX;
let scrollLeft;
slider.addEventListener('mousedown', (e) => {
isDown = true;
slider.classList.add('active');
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
if(!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 3; //scroll-fast
slider.scrollLeft = scrollLeft - walk;
console.log(walk);
});/* style.css */
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-x: hidden;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
}
.wrapper {
display: flex;
flex-direction: row;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
overflow: hidden;
cursor: pointer;
}
.wrapper.active {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.slide {
width: 100vw;
height: 100vh;
}
.one {
background: #efdefe;
}
.two {
background: #a3f3d3;
}
.three {
background: #0bbaa0;
}
.four {
background: #00dfdf;
}
::-webkit-scrollbar {
display:none;
}