盒子阴影仍然切断溢出-y设置为可见

Question

我遇到与this question相同的问题，但我需要将overflow-x设置为scroll，否则整个文档将比屏幕更宽。从理论上讲，将overflow-y设置为visible 应该保持框阴影可见，但它仍会将其剪掉。这可以通过下面的代码看出。

＆＃13;

＆＃13;

*::-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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我想让阴影在父div之外完全可见，这有可能吗？

Answer 1

盒子阴影正在切断，因为应该有一个你刚刚隐藏的滚动条。

简单的solutoin

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

Answer 2

您可以在#container中添加填充，以便始终显示阴影，但水平阴影将被剪切。

*::-webkit-scrollbar {
  display: none;
}
body {
  margin: 0;
  background: #ddd;
  height: 100%;
  width: 100%;
}
#container {
  max-width: 300px;
  overflow: scroll;
  padding: 100px 0;
}
.scroll {
  width: 100%;
  height: 60px;
  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, .5);
}

<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 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>

Answer 3

从边距中减去填充：

#container {
  margin: -100px 0;
}