I'm currently trying to build a scrollable horizontal overflow that is scrollable with mouse wheel when the user arrives at this element while scrolling the page. Only issue I'm having is that, if the user scrolls without moving the cursor, the scroll won't fire as it is not understood that the mouse is over the element with the wheel event. Moving the mouse at least one pixel once on the element does fire the handler though.
Any way to fix this?
const scrollable = document.querySelector('main')
scrollable.addEventListener('wheel', e => {
e.preventDefault()
scrollable.scrollLeft += e.deltaY
})html,
body {
margin: 0;
font-family: sans-serif;
}
.vertical-section {
height: 800px;
display: flex;
align-items: center;
justify-content: center;
}
main {
overflow-x: hidden;
display: flex;
top: 0;
}
h1 {
margin: 0;
padding: 0;
}
section {
min-width: 100vw;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
font-size: 4ch;
}
section:nth-child(even) {
background-color: teal;
color: white;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<div class="vertical-section" style="background-color: antiquewhite">
Content above
</div>
<div class="sticky-container">
<main>
<section>
<h1>Slide 1</h1>
</section>
<section>
<h1>Slide 2</h1>
</section>
<section>
<h1>Slide 3</h1>
</section>
<section>
<h1>The End</h1>
</section>
</main>
</div>
<div class="vertical-section" style="background-color: brown">
Content Below
</div>
<script src="script.js"></script>
</body>
</html>