Box-shadow 仍然被切断，overflow-y 设置为可见

Question

我遇到了与此问题相同的问题，但我需要overflow-x设置为scroll，否则整个文档将比屏幕更宽。理论上，设置overflow-y为visible 应该保持盒子阴影可见，但它仍然会切断它。这可以通过下面的代码看出。

*::-webkit-scrollbar {
  display: none;
}
body {
  margin: 0;
  background: #ddd;
  height: 100%;
  width: 100%;
}
.scroll {
  width: 100%;
  height: 60px;
  overflow-x: scroll;
  overflow-y: visible;
  white-space: nowrap;
}
.box {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 5px;
  background: #fff;
  box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 1);
}

<div id="container">
  <div class="scroll">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

我希望阴影在父 div 之外完全可见，这可能吗？

Answer 1

框阴影被切断，因为应该有一个您只是隐藏的滚动条。

简单的解决方案

将底部填充设置为.scroll容器。