CSS box-shadow su contenuto a scorrimento

Question

Desidero avere un div con un'insieme box-shadow che abbia contenuto a scorrimento in esso. Sfortunatamente, il box-shadow non viene castato sugli elementi all'interno del contenuto, ma piuttosto sullo sfondo, ma voglio che copra anche gli elementi di contenuto.

Mi sono imbattuto in questa soluzione: http://jsfiddle.net/HPkd3/ (via). Il problema è che non riesco a farlo funzionare con la mia configurazione a scorrimento; se posiziono la maschera all'interno del div scorrevole, l'ombra scorre via - e se la posiziono al di fuori del div, la barra di scorrimento ha l'ombra proiettata su di esso, che sembra strano.

Qualche idea su come farlo correttamente?

Edit: qualche esempio di codice: http://jsfiddle.net/ZSpSS/2/

voglio quadrati rossi in questo esempio coperto con l'ombra, mentre l'ombra deve essere persistente quando ho scorrere il contenuto.

Answer 1

Hai provato qualcosa di simile:

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> 

Se si può dare maggiori dettagli posso aiutare con una più specifica answer

Answer 2

Here is one possible solution.

Ho commentato i miei stili CSS e dovresti facilmente capire il mio markup html. Ecco cosa ho fatto.

1. creati due div
2. Uno sta agendo come contenitore per quello che ha la casella inserto ombra .outer
3. L'altro contiene la casella inserto ombra .inner-content
4. ho aggiunto overflow:scroll al .inner-content div per applicare la barra di scorrimento. (Si può anche cambiare overflow:scroll a overflow:auto che vi darà anche una barra di scorrimento

Answer 3

Sono assolutamente avere questo lavoro Partenza:!

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

Nota background blocchi rossi correttamente sono "sotto" le ombre

Avvertenze: richiede di indovinare la dimensione della barra di scorrimento in pixel. Scommetto che c'è un modo sicuro per misurare questo con javascript però. Se hai solo una barra di scorrimento verticale, questo finisce per essere molto più semplice poiché non è necessario regolare il margine inferiore.

Answer 4

provare questo

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