防止父元素从子元素滚动

Question

divA和divB是两个元素

我有divA，它的宽度是窗口宽度的两倍，高度是窗口高度的两倍。我已经将溢出设置为隐藏，因为我不希望用户能够滚动div。但是，我注意到，如果我在divA的顶部放置一个位置绝对的较小的div (divB)，并且如果用户将光标放在divB上，那么他就能够滚动divA。

如何防止在divA上不希望的滚动?

.divA{
width: 200vw;
height: 200vh;
overflow: hidden;
padding-bottom: 100%;
}
.divB{
position: absolute;
top: 20%;
left: 20%;
width: 100px;
height: 100px;
}

Answer 1

overflow: hidden不阻止该元素上的滚动。它指定如果元素中的内容溢出元素将被剪切。注意，绝对定位的子元素不被认为是父元素内容的一部分。

也许您想要在divA之外的容器中加入overflow: hidden。这将阻止用户滚动divA，即使它比显示区域大。

body {
padding: 0;
margin: 0;
}
.container {
overflow: hidden;
}
.divA {
width: 200vw;
height: 200px;
padding-bottom: 100px;
background: linear-gradient(90deg, black 0%, white 100%);
;
}
.divB {
position: absolute;
top: 20%;
left: 20%;
width: 100px;
height: 100px;
background: red;
}
.abs {
position: absolute;
background: green;
left: 500px;
top: 50px;
height: 100px;
width: 100px;
}
.rel {
position: relative;
background: blue;
left: 300px;
top: -50px;
height: 100px;
width: 100px;
}
.ballast {
height: 100px;
}

<div class="ballast">above</div>
<div class="container">
<div class="divA">
<div class="divB"></div>
<div class="abs"></div>
<div class="rel"></div>
</div>
</div>
<div class="ballast">below</div>