我可以设置overflow:隐藏但仍然显示滚动条吗？
我可以设置overflow:隐藏但仍然显示滚动条吗？
提问于 2019-06-20 07:07:22
我想在弹出窗口时禁用滚动，但我讨厌在添加/删除滚动条时整个页面的大小发生变化。有没有办法在不隐藏滚动条的情况下禁用滚动？
有点像设置overflow时的情形:滚动到没有足够内容滚动的元素:它仍然显示滚动条，但它被禁用了。
//when popup is open, disable scroll on body
body.popupOpen {
overflow: hidden;
}回答 3
Stack Overflow用户
发布于 2019-06-20 07:28:17
确保溢出(滚动条)在body元素上，然后添加一个覆盖，当弹出窗口显示时，它将简单地覆盖body及其滚动条。
以下是一个简化的示例，其中仅包含无法滚动的覆盖：
body {
overflow: auto;
margin: 0;
max-height: 100vh; /* no more than the height of the viewport*/
}
html {
overflow: hidden; /* This one is important to avoid the propagation */
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
}
.content {
min-height: 500vh;
}<div class="overlay">
</div>
<div class="content">
</div>
Stack Overflow用户
发布于 2019-06-20 07:36:11
你可以创建一个div来填充整个页面视图，并且让它变得透明，这样你就可以启用/禁用div滚动来管理滚动条：
.theDivInactive {
background: none;
pointer_events: none;
width: 100vw;
height: 100vh;
overflow: hidden;
}
and switch the class when the popup is on the screen:
.theDivActive {
background: none;
pointer_events: none;
width: 100vw;
height: 100vh;
overflow: scroll;
}
`Stack Overflow用户
发布于 2019-06-20 07:16:22
答案是否定的，但你可以设置‘隐藏’并创建一个元素来模拟滚动条，但为什么要这样做，这只会让用户感到困惑。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56676994
复制相关文章
相似问题
腾讯云开发者
