CSS box-shadow для прокручиваемого содержимого

Question

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

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

Есть идеи, как сделать это правильно?

Редактировать: Пример кода: http://jsfiddle.net/ZSpSS/2/

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

Answer 1

У меня полностью это работает! Проверить:

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

Обратите внимание, что красные фоновые блоки правильно находятся "под" тенями.

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

Answer 2

попробуйте

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

Answer 3

Вот одно из возможных решений.

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

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

Answer 4

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

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>

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