打开将“溢出：隐藏”分配给正文的模式或窗口时，页面滚动到最顶部答案

【问题标题】：Page scrolls to the topmost part when opening a modal or window that assigns "overflow:hidden" to body打开将“溢出：隐藏”分配给正文的模式或窗口时，页面滚动到最顶部
【发布时间】：2020-07-28 11:48:28
【问题描述】：

我在这里阅读了 10 多个主题/问题，但没有一个有效。我最近想出了如何显示隐藏和/或禁用滚动的模式。接下来，我想出了如何防止我的页面因为滚动条的移除而短暂向右移动一秒钟（丑陋的效果）。当您在那里打开模式时，我最终仍然显示滚动条，但禁用了类似于 Facebook 的滚动。

但是，我遇到了一个问题，它会自动滚动到页面的最顶部。我尝试了很多事情来解决，但都无济于事。

当然，我通过e.preventDefault()禁用了默认点击事件
我在打开模式时分配了溢出：隐藏到正文。我也用 overflow-y:hidden to body 做到了。
有人说当 body 设置为 100% 时，您在打开 modal 时将其设置为 auto。它不起作用。反之亦然。

我想重申一下，下面的代码确实有效。他们禁用滚动并且不会将我的页面向右移动，因为滚动条保持不变但只是禁用了。我希望在打开模式时摆脱突然滚动到页面最顶部的问题。

更新：我添加了片段

$(document).on("click", "a", function(e) {
e.preventDefault();
$(".parentbox").show();
$("body").addClass("no-scroll");
});

* {
padding: 0;
margin: 0;
}

html, body {
height: 100%;
}

html {
overflow-y: scroll;
}

.no-scroll {
overflow: hidden;
}

.parentbox
{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}

.box
{
position: absolute;
background-color: #FFFFFF;
padding: 28px 18px;
text-align: center;
width: 320px;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<body>

<div class="content">
<p><strong>Top section</strong></p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div class="parentbox">
<div class="box">
This is a modal
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#">Open Modal</a>
<br/><br/><br/>
</div>



</body>
</html>

【问题讨论】：

您能否分享更多代码，以便我们复制问题？
遗憾的是，我现在不在这个地方可以提供sn-p。我会做的，一旦我能做到
我添加了一个sn-p。
fyi，我试图完全删除模式，它会滚动到顶部。我认为这个问题与完全隐藏的溢出有关。

标签： jquery html css scroll overflow

【解决方案1】：

您可以删除href="#" 以防止页面滚动到顶部。

编辑：虽然使用按钮可能更好。

在这种情况下，您应该使用按钮。更适合从语义和可访问性的观点。锚应该带你某处，不执行操作。

Source

【讨论】：

我试过了，但还是不行。我认为 preventDefault() 已经解决了这个问题。
我添加了sn-p。
使用position: fixed保存window.scrollY并在模态关闭时恢复。 This article 解释了如何。 overflow-y: hidden 滚动回顶部是有道理的，您正在剪辑内容。

【解决方案2】：

感谢您的所有回复。我通过删除 html 和 body 上的 height:100% 来解决这个问题。我回到滚动条被移除的地方，导致整个页面移动到右侧。为了修复移动，当通过 Jquery 打开时，我在内容 div / body 中添加了 padding:17px。

谢谢！

【讨论】：