Actualmente estoy tratando de crear un desbordamiento horizontal desplazable que se pueda desplazar con la rueda del mouse cuando el usuario llega a este elemento mientras se desplaza por la página. El único problema que tengo es que, si el usuario se desplaza sin mover el cursor, el desplazamiento no se activará ya que no se entiende que el mouse está sobre el elemento con el evento de la rueda. Sin embargo, mover el mouse al menos un píxel una vez en el elemento activa el controlador.
Cualquier forma de arreglar esto?
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>