javascript - 框阴影消失在输入元素上

Question

我尝试在滚动时为 div 添加 box-shadow。我只是尝试了一下，一切正常，除了 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

例如

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

Answer 2

如果你想在 textarea 和 input 上有阴影，你需要告诉浏览器 input 和 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 的阴影会阻塞指针事件。