He estado tratando de lograr este efecto de desplazamiento horizontal predeterminado al llegar a la vista del elemento. Todavía no pude encontrar una forma decente de implementarlo correctamente, por ahora solo pude lograrlo con CSS puro (el problema es que no se desplaza horizontalmente correctamente, necesito hacer clic en el elemento para que sea consciente Estoy en la vista correcta. Este es mi código por ahora:
::-webkit-scrollbar { width: 1px; height: 1px; } ::-webkit-scrollbar-button { width: 1px; height: 1px; } .test { position: absolute; display: block; top: 0; left: 0; width: calc(250px + 1px); max-height: 750px; margin: 0; padding-top: 1px; background: #abc; overflow-y: auto; overflow-x: hidden; transform: rotate(-90deg) translateY(-250px); transform-origin: right top; padding: 250px 0 0 0; } .test div { display: block; padding: 5px; background: #cab; transform: rotate(90deg); transform-origin: right top; width: 250px; height: 250px; margin: 10px 0; } <div class="test"> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> </div>Me encantaría saber si hay alguna forma de hacer que el desplazamiento comience automáticamente de forma horizontal cuando llego a la vista, y si eso no es posible, me encantaría saber cómo lo implementarías con JS en React. ¡Gracias!
Estoy un poco confundido acerca de la redacción de esta pregunta: por "desplazamiento horizontal predeterminado", ¿quiere decir que cuando el usuario se desplaza hacia abajo, se desplaza horizontalmente?
Si ese es el caso, probablemente querrá configurar un controlador de eventos para detectar el desplazamiento y hacer que llame a window.scrollBy()
window.addEventListener('scroll', handleScroll); handleScroll(e){ window.ScrollBy(e.deltaY, 0); }