I am working on this project where I need both, a scroll listener and scroll-snapping, so I can use a mouse wheel with a horizontal full-screen container that snaps between sections. (When the user scrolls vertically, it scrolls on the X-axis instead.)
I can get both of these to work separately, but not together. When I enable the JS on scroll function it prevents the scroll snapping from working.
I tried everything I know, tried changing other containers' height/overflow properties and tried targeting other elements than body or window. What would be the best workaround be?
The snippet here is adjusted to work with scroll listener at the moment
const scrollContainer = document.querySelector('.container');
scrollContainer.addEventListener('wheel', (e) => {
e.preventDefault();
scrollContainer.scrollLeft += e.deltaY;
});* {
margin: 0;
}
.container {
display: flex;
overflow-x: scroll;
/*scroll-snap-type: x mandatory;*/
}
section {
height: 100vh;
width: 300vw;
min-width: 100vw;
/*scroll-snap-align: start;*/
}
#section1 {
background: red;
}
#section2 {
background: yellow;
}
#section3 {
background: blue;
}<html>
<div class="container">
<section id="section1"></section>
<section id="section2"></section>
<section id="section3"></section>
</div>
</html>
When i add the following code to enable scroll snap. It stops the wheel event listener from functioning correctly.
.container {
scroll-snap-type: x mandatory;
}
section {
scroll-snap-align: start;
}