Cień CSS na przewiniętej zawartości

Question

Chcę mieć element div z wstawką Box-shadow z przewiniętą zawartością. Niestety, box-shadow nie jest rzucany na elementy w treści, ale raczej na tle, ale chcę, żeby obejmował także elementy treści.

Natknąłem się na to rozwiązanie: http://jsfiddle.net/HPkd3/ (via). Problem polega na tym, że nie mogę uruchomić go z moją przewijaną konfiguracją; jeśli ustawię maskę wewnątrz przewijanego div, cień zniknie - a jeśli ustawię go poza div, pasek przewijania ma cień rzucony na niego, co wygląda dziwnie.

Jakieś pomysły, jak to naprawić?

Edycja: Niektóre przykładowy kod: http://jsfiddle.net/ZSpSS/2/

chcę czerwone kwadraty w tym przykładzie pokryte cieniu, podczas gdy cień powinno być trwałe, kiedy przewijanie zawartości.

Answer 1

Czy próbowałeś coś takiego:

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> 

Jeśli możesz podać więcej szczegółów mogę pomóc w bardziej szczegółowy odpowiedź:

Answer 2

Here is one possible solution.

Skomentowałem moje style CSS i powinieneś z łatwością zrozumieć mój znacznik HTML. Oto co zrobiłem.

1. utworzone dwa div
2. jeden pełni funkcję zbiornika na taki, który ma pole wstawka shadow .outer
3. Drugi zawiera pole wstawka cień .inner-content
4. I dodaje overflow:scroll do .inner-content div aby zastosować pasek przewijania. (Można również zmienić overflow:scroll do overflow:auto który również daje pasek przewijania

Answer 3

Całkowicie mają tej pracy Sprawdź:

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

Uwaga czerwone bloki tła poprawnie są „pod” cienie

Ostrzeżenia: Wymaga odgadnięcia rozmiaru paska przewijania w pikselach Założę się, że istnieje bezpieczny sposób zmierzenia tego z javascript chociaż .Jeśli masz tylko pionowy pasek przewijania, to kończy się znacznie prostsze, ponieważ nie trzeba dostosowywać marginesu-dołu.

Answer 4

spróbować tej

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