Estoy desarrollando un sitio web con Elementor Pro en el que quiero tener una página que tenga un desplazamiento vertical normal, pero cuando llega a la segunda sección, quiero que el desplazamiento vertical se detenga y automáticamente te desplace horizontalmente.
Hasta ahora he conseguido un scroll horizontal pero si he creado una nueva pagina con solo ese apartado. En una página con más contenido que se desplaza verticalmente, tendría que hacer clic en la sección o en la barra de desplazamiento horizontal para llamar la atención de la página y cambiar la dirección de desplazamiento, y no sé cómo detener la sección en el punto de anclaje superior también. .
Esto es lo que estoy tratando de lograr: captura de pantalla
https://premiumaddons.com/elementor-horizontal-scroll-widget/
El código que tengo hasta ahora:
codigo de pagina:
HTML {
scroll-behavior: smooth;
}
@media only screen and (min-width: 1025px) {
main {
overflow-x: hidden;
display: flex;
}
section {
min-width: 100vw!important;
min-height: 100vh!important;
}
}
elemento HTML:
<script type="text/javascript">
if (window.innerWidth > 1025) {
const scrollContainer = document.querySelector("main");
scrollContainer.addEventListener("wheel", (evt) => {
evt.preventDefault();
scrollContainer.scrollLeft += evt.deltaY;
});
} else {
}
</script>
¿Puede alguien ayudarme con algunas ideas u otro hilo? Realmente no encontré nada que responda a mi pregunta aquí o en Youtube, solo cómo hacer un sitio web de desplazamiento horizontal completo.
.