(Editar: el JS en la publicación original se incluyó por error; ahora se eliminó)
Tengo un desplazamiento horizontal que funciona perfectamente bien.
El problema es que mis diapositivas se pueden desplazar verticalmente (y todo esto está bien porque hay mucho contenido), lo que significa que cuando me desplazo hacia abajo hasta la parte inferior de la diapositiva 1 y luego me desplazo horizontalmente a la diapositiva 2, la ventana gráfica se ajusta a la izquierda de la diapositiva. 2 pero la ventana gráfica permanece en la parte inferior de la diapositiva. Quiero que la ventana gráfica también se ajuste a la PARTE SUPERIOR de la diapositiva 2.
No he podido encontrar una solución a esto, y solo parece haber start , end y center como valores de trabajo para scroll-snap-align que no resuelve mi problema.
¿Alguien sabe una forma de evitar esto?
Vea el código a continuación.
#slidesContainer { height: auto; width: auto; display: flex; flex-direction: row; flex-wrap: nowrap; position: relative; overflow: scroll; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } #slides { color: black; width: 100%; height: auto; font-size: 100px; position: static; flex-grow: 0; flex-shrink: 0; scroll-snap-align: start; scroll-snap-stop: always; } <div id="slidesContainer"> <div id="slides" style="background-color:blue;">Slide 1<br><br> Scroll down until there is no more text, then scroll right text text text text text text text text text text text text text </div> <div id="slides" style="background-color:green;">Slide 2<br><br>This text is not visible unless you scroll back up - this is the problem.</div> <div id="slides" style="background-color:yellow;">Slide 3<br><br></div> </div>Muchas gracias por adelantado.
Si te estoy entendiendo correctamente, esto debería funcionar bien. Básicamente, agregué una barra de desplazamiento personalizada a través de CSS debajo de la nota /* manual scrollbar */ . Puedes diseñarlo como quieras, pero lo hice básico. Luego, puede llevar la barra de desplazamiento horizontal a la parte superior de sus elementos usando transform: rotateX(180deg); Las notas que agregué con las adiciones en su CSS deberían ayudar.
#slidesContainer { height: 100vh; width: auto; display: flex; flex-direction: row; flex-wrap: nowrap; position: relative; overflow: scroll; /* important for manual scrollbar to show */ } #slides { color: black; width: 100%; height: 100%; font-size: 100px; position: static; flex-grow: 0; flex-shrink: 0; } /* manual scrollbar */ #slidesContainer::-webkit-scrollbar { -webkit-appearance: none; width: 0px; } #slidesContainer::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0, 0, 0, .5); box-shadow: 0 0 1px rgba(255, 255, 255, .5); } /* Puts scrollbar at top */ div#slidesContainer { transform: rotateX(180deg); } div#slidesContainer * { transform: rotateX(180deg); } /* for good measures */ body { margin: 0; } <div id="slidesContainer"> <div id="slides" style="background-color:blue;">Slide 1<br><br> text text text text text text text text text text text text text </div> <div id="slides" style="background-color:green;">Slide 2<br><br></div> <div id="slides" style="background-color:yellow;">Slide 3<br><br></div> </div>