es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿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?

Tags:  , ,

Answer

  1. Avatar for 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 utilizar background-attachment: local para crear sombras de desplazamiento dentro de un elemento, sin afectar a ningún otro elemento o propiedad en la página.

Comments are closed.