Question

我试图在滚动时为div添加box-shadow。我只是去尝试一切正常，除了盒子阴影没有应用于文本区域或文本字段... 我正在使用twitter-bootstrap 这是我试过的......

 $('#target').scroll(function() {
  var scrollTop = $(this).scrollTop();
  if(scrollTop > 1) {
    if(!$(this).hasClass('scrolled')) {
      $(this).addClass('scrolled');
    }
  } else {
    $(this).removeClass('scrolled');
  }

});

http://jsfiddle.net/xVdYv/1/

请建议我如何克服这个缺陷...

提前致谢...

Answer 1

以这种方式改变你的CSS

.scrolled:before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    z-index: 1;
    width: 100%;
    height: 50px;   
    pointer-events: none;
    box-shadow: inset 0px 20px 25px -20px #000000;
}

这会将阴影应用于带有z-index的定位伪元素：最终效果是与窗体控件重叠的阴影

作为替代解决方案，您可以简单地使用线性渐变作为.scrolled:before

的背景

e.g。

.scrolled:before {
    ...
    background: linear-gradient(to bottom, rgba(50,50,50, .25) 0, 
                                           rgba(50,50,50, 0) 50px);
}

Answer 2

如果你想在textarea输入阴影并输入你需要告诉浏览器输入和textarea也想要一个阴影

.scrolled,.scrolled input,.scrolled textarea{
box-shadow: inset 0px 20px 25px -20px #000000;
}

Answer 3

正如Fabrizio所说的那样，伪元素将成为添加此演示文稿的方式。

我可能选择这样的事情：http://jsfiddle.net/xVdYv/6/

.scrolled {
 position: relative;
}

.scrolled:before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    z-index:10;
    width: 100%;
    height:1px;
    box-shadow: 0px 0px 5px #000000;
}

不使用插入框阴影，只设置1px高度意味着当阴影覆盖时，您仍然可以与表单元素进行交互。否则，50px阴影将阻止指针事件。

Box-shadow在输入元素上消失

3 个答案: