CSS box-shadow en contenido desplazado

Question

Quiero tener un div con una caja de sombras insertada que tiene contenido desplazado en él. Lamentablemente, la sombra de cuadro no se aplica a los elementos del contenido, sino a fondo, pero también quiero que cubra los elementos de contenido.

Me encontré con esta solución: http://jsfiddle.net/HPkd3/ (via). El problema es que no puedo hacer que funcione con mi configuración desplazada; si coloco la máscara dentro del div desplazable, la sombra se desplaza, y si la coloco fuera del div, la barra de desplazamiento tiene la sombra proyectada sobre él, lo que se ve extraño.

¿Alguna idea de cómo hacerlo bien?

Editar: un código de ejemplo: http://jsfiddle.net/ZSpSS/2/

Quiero los cuadrados rojos en este ejemplo cubierto con la sombra, mientras que la sombra debe ser persistente cuando me desplazarse por el contenido.

Answer 1

¿Ha intentado algo como esto:

CSS:

#test{ 
    width:500px; 
    height:200px; 
    overflow:auto; 
    -moz-box-shadow: inset 1px 1px 20px 4px black; 
    -webkit-box-shadow: inset 1px 1px 20px 4px black; 
    box-shadow: inset 1px 1px 20px 4px black; 
} 

HTML:

<div id="test"><p> 
sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd 
<br /></p></div> 

Si usted puede dar más detalles puedo ayudar con una más específica respuesta

Answer 2

Here is one possible solution.

Comenté mis estilos de CSS y debería comprender fácilmente mi marcado de html. Aquí esta lo que hice.

1. creado dos divs
2. Uno está actuando como contenedor para el que tiene el cuadro de inserción sombra .outer
3. El otro contiene el cuadro de inserción sombra .inner-content
4. añadí overflow:scroll a la .inner-content div para aplicar su barra de desplazamiento. (También se puede cambiar overflow:scroll a overflow:auto que también le dará una barra de desplazamiento

Answer 3

estoy totalmente de tener este trabajo Salida:!

http://jsfiddle.net/yobert/6Ff4u/

Nota los bloques fondo rojo correctamente están "bajo" las sombras.

Advertencias: Requiere que adivines el tamaño de la barra de desplazamiento en píxeles. Apuesto a que hay una forma segura de medir esto con javascript. Si solo tienes una barra de desplazamiento vertical, esto termina siendo mucho más simple ya que no necesita ajustar el margen inferior.

Answer 4

probar esto

box-shadow:1px 1px 1px 1px #000000 inset; pointer-events: none;