css - box-shadow 仍然切断，overflow-y 设置为可见

Question

我遇到了与 this 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 容器设置底部填充。