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

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

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

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

Изменить: Пример кода: http://jsfiddle.net/ZSpSS/2/

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

ОТВЕТЫ

Ответ 1

У меня все это работает! Выезд:

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

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

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

Ответ 2

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

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

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

Ответ 3

попробуйте это

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

Ответ 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>

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