En estos días me ha tocado desarrollar una sección con varias categorías que filtran contenido a mostrar en pantalla, vamos unas “pestañas/tabs” de la vieja escuela pero se requería que no causaran en responsivo el agregar más altura a la web y así evitar tener que desplazarse mucho… por concluyente lo que se me ocurrió fue hacer una lista que las tabs hicieran scroll hacia los laterales pero, ¿cómo diablos le haría para demostrar por UX que la lista era scrolleable? Pues con unas sombras.
Buscando un poco me encontré con background-attachment que nos permite detectar si un fondo debería hacer scroll y ¡Bingo!, ahí tenemos la respuesta.
Entonces, vamos a ver la base:
position: relative;
overflow-y: none;
overflow-x: auto;
background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-color: white;
background-size: 20px 100%, 20px 100%, 20px 100%, 20px 100%;
background-attachment: local, local, scroll, scroll;En general el overflow se habilita solo en el eje X (osea en horizontal, también se puede usar esto en vertical) y entonces asignamos el fondo para que aplique en “local” es decir “solo cuando es estático” y “scroll” cuando hay scroll (tanto izquierda, como derecha ambos casos). Recuerda, debes agregar un width y a su vez un white-space: nowrap si vas a usar algo como un <ul> con sus <li> en display: inline-block; igual en el ejemplo al final del fragmento de código te comparto cómo quedaría justamente usando ul.
Entonces, ahora sí ya con este código aplicado, veríamos algo como lo siguiente:
Ignorando que usé inglés en este demo (iugh, inglés) podemos ver las sombras en los laterales significando que se puede hacer hacia la izquierda o derecha.
Si se llega al final, entonces ya no hay sombra.
Mismo caso sería al inverso.
Y si en este caso todo el contenido cabe dentro de su “contenedor”, entonces no habría sombras en ningún lado. ¿Magia no lo creen?
Te dejo un enlace a un JSFiddle para que puedas verlo más a detalle que por acá, es un poco complicado compartirte toda la base:
https://jsfiddle.net/71qzkjht/
Espero esto te ayude y te funcione para una mejor UX en tu sitio.
