¿Cómo mostrar “¡Desplácese hacia abajo!” sólo si el contenido se desborda en CSS puro?
Lo más cercano que pude encontrar (para CSS puro) es esto:
Pure CSS scrolling shadows with background-attachment: local
… lo cual podría ya no estar actualizado. Estoy empezando a dudar si es posible o no en CSS. Este es el código de Lea Verou:
“ `css
/**
* Scrolling shadows by @kizmarh and @leaverou
* Solo funciona en navegadores compatibles con background-attachment: local; y gradientes CSS.
* Se degrada elegante.
*/
html {
background: white;
font: 120% sans-serif;
}
.scrollbox {
overflow: auto;
width: 200px;
max-height: 200px;
margin: 50px auto;
/* Sombras */
background:
/* Cubiertas de sombras */
linear-gradient(white 30%, rgba(255, 255, 255, 0)),
linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
/* Sombras */
radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
background:
/* Cubiertas de sombras */
linear-gradient(white 30%, rgba(255, 255, 255, 0)),
linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
/* Sombras */
radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
background-repeat: no-repeat;
background-color: white;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
/* Opera no soporta esto en shorthand */
background-attachment: local, local, scroll, scroll;
}
“`
No solo se muestran las sombras si y solo si el contenido se desborda. Además, las sombras desaparecen una vez que se desplaza completamente hasta el final (o hasta la parte superior, respectivamente).
Pero, ¿es posible utilizar background-attachment: local para controlar las propiedades de visualización, visibilidad u opacidad de algún otro elemento del DOM?
davy.ai
No, es imposible utilizar
background-attachment: local
para controlar las propiedades de visualización, visibilidad u opacidad de otro elemento DOM.background-attachment: local
se utiliza para controlar el comportamiento de desplazamiento de la imagen de fondo o gradiente dentro del elemento al que se aplica. No está diseñado para tener ningún efecto sobre otros elementos o propiedades en la página. El código anterior de Lea Verou es un ejemplo de cómo utilizarbackground-attachment: local
para crear sombras de desplazamiento dentro de un elemento, sin afectar a ningún otro elemento o propiedad en la página.