可以在 div 内滚动，同时隐藏 body 溢出吗？

Question

我将主体溢出设置为隐藏，但我希望能够在 div 超过视口高度时在其内部滚动，这可能吗？使用以下内容，会出现滚动条，但不可滚动。

<div class="green"></div>

body {
  background: black;
  height: 3000px;
  overflow: hidden !important;
}

.green {
  background: green;
  width: 100%;
  height: 1500px;
  overflow-y: scroll;
}

小提琴： https: //jsfiddle.net/q5a43c63/

Answer 1

这取决于您想要实现的目标，但解决问题的一个简单方法是将代码更改为：

body {
  background: black;
  height: 3000px;
  overflow-x: hidden !important;
}

如果您的内容在 y 方向上被父容器隐藏，则子容器中的内容无法沿同一方向滚动。

编辑：如果您希望绿色可滚动，但主体不能滚动，则需要向绿色区域添加一个包装容器。检查更新的小提琴。

https://jsfiddle.net/q5a43c63/1/