Las sombras de desplazamiento son cuando puede ver una pequeña sombra insertada en los elementos si (y solo si) puede desplazarse en esa dirección. Es una buena experiencia de usuario. De hecho, puedes llevarlo a cabo en CSS, lo que creo que es asombroso y uno de los grandes trucos de CSS. Excepto … simplemente no funciona en iOS Safari. Solía funcionar, y luego se rompió en iOS 13, junto con algunas otras cosas útiles de CSS, sin explicación por qué y nunca se ha solucionado.
Entonces, ahora, si realmente desea sombras de desplazamiento (de todos modos, creo que son más útiles en los navegadores móviles), probablemente sea mejor utilizar JavaScript.
Aquí hay un ejemplo de CSS puro para que pueda verlo funcionar en todos los navegadores excepto iOS Safari. Capturas de pantalla:
Estoy sacando a relucir esto ahora porque veo que Jonnie Hallman está blogueando al respecto nuevamente. Lo mencionó como un pequeño detalle asombroso en mayo. Hay ciertas interfaces en las que las sombras de desplazamiento tienen más sentido.
Dando un paso atrás, pensé en la solución que funcionaba actualmente, usando eventos de desplazamiento. Si el área de desplazamiento se ha desplazado, muestre las sombras superior e izquierda. Si el área de desplazamiento no está completamente desplazada, muestre las sombras inferior y derecha. Con esto en mente, probé el enfoque más simple, directo y menos inteligente al colocar divs vacíos en la parte superior, derecha, inferior e izquierda de las áreas de desplazamiento. Llamé a estos “bordes” y los observé usando la API Intersection Observer. Si alguno de los bordes no se cruza con el área de desplazamiento, podría suponer que el borde en cuestión se había desplazado y podría mostrar la sombra para ese borde. Luego, una vez que el borde se cruza, podría asumir que el área del pergamino ha alcanzado el borde del pergamino, por lo que podría ocultar esa sombra.
Inteligente inteligente. Desafortunadamente, no hay demostración en vivo, pero lea la publicación para obtener algunos detalles adicionales sobre la implementación.
Otros ejemplos basados en JavaScript
Creo que si vas a hacer esto, deberías ir al IntersectionObserver aunque ruta. Me encantaría ver a alguien portar la mejor de estas ideas todas juntas (guiño, guiño).