CSS-тень на прокрученном контенте

Question

Я хочу иметь div с вставкой-теневой тенью, в которой есть прокручиваемый контент. К сожалению, ящик-тень не попадает на элементы внутри контента, а скорее на фоне, но я хочу, чтобы он также охватывал элементы контента.

Я наткнулся на это решение: http://jsfiddle.net/HPkd3/ (via). Проблема в том, что я не могу заставить ее работать с моей прокрученной настройкой; если я помещаю маску в прокручивающийся div, тень прокручивается - и если я разместим ее вне div, на полосе прокрутки будет тень, наложенная на нее, что выглядит странно.

Любые идеи, как это сделать правильно?

Edit: Некоторые примеры кода: http://jsfiddle.net/ZSpSS/2/

Я хочу красные квадраты в этом примере, покрытой тенью, в то время как тень должна быть настойчивым, когда я прокрутки содержимого.

Answer 1

Вы пробовали что-то вроде этого:

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> 

Если вы можете дать более подробную информацию я могу помочь с более конкретным ответ

Answer 2

Here is one possible solution.

Я прокомментировал свои стили CSS, и вы должны легко понять мою разметку html. Вот что я сделал.

1. Созданы две дивы
2. Один выступают в качестве контейнера для того, которая имеет поле врезки теневого .outer
3. Другой содержит окно вставки тень .inner-content
4. Я добавил overflow:scroll к .inner-content DIV для применения вашей полосы прокрутки. (Вы можете также изменить overflow:scroll к overflow:auto который также даст вам полосу прокрутки

Answer 3

Я полностью иметь эту работу Проверьте:

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

Примечание красный фон блоки правильно являются «под» тени.

Предостережения: требуется угадать размер полосы прокрутки в пикселях. Я уверен, что есть безопасный способ измерения этого с помощью javascript. Если у вас есть только вертикальная полоса прокрутки, это в конечном итоге проще, так как вам не нужно настраивать нижний край.

Answer 4

попробовать этот

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