Una de las formas que más se explica por sí misma para que el usuario sepa que un elemento se puede desplazar es usar algún tipo de superposición de desvanecimiento en los extremos desplazables de un contenedor. Me pregunto cómo podría hacerse esto de una manera limpia.
Quiero que los elementos se superpongan solo cuando haya más contenido para desplazarse, he visto ejemplos que tenían superposiciones desvanecidas estacionarias, pero en mi opinión son imperfectos.
Puede usar pseudoelementos ::before y ::after que están posicionados de forma absoluta. Aquí está la estructura:
<div className="outer-container"> <!-- overflow-x: hidden --> <div className="inner-container"> <!-- flex & overflow-x: scroll --> <div>1</div> <div>2</div> <div>3</div> ... </div> </div> .outer-container { overflow-x: hidden; position: relative; } .outer-container::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(to right, #fff, transparent); width: 3rem; } .outer-container::after { /* same */ right: 0; background: linear-gradient(to left, #fff, transparent); /* same */ } .inner-container { display: flex; flex-direction: row; overflow-x: scroll; } La razón por la que usamos dos contenedores es que necesitamos mantener los elementos absolutos ( ::before & ::after ) estacionarios y evitar que se muevan con el contenedor interno desplazable.
También para que el usuario sepa que está al final de los límites del elemento, podemos usar la siguiente lógica:
.scrollLeft > 0.offsetWidth + .scrollLeft < .scrollWidthDe modo que cuando el usuario se desplaza al principio o al final del contenedor desplazable, esas superposiciones se ocultan.
Hice un ejemplo usando componentes de reacción y estilo, puedes verlo aquí: https://codesandbox.io/s/horizontal-scroll-with-overlay-elements-uhec0?file=/src/App.tsx