Question

我的应用程序中出现一个模式。我想要的是在模式打开时禁用模式后面的滚动。

目前，我在 body 上使用overflow: hidden，适用于chrome和android，但在Safari和iOS中是不够的，因为它可以让我滚动到模式后面。因此，我添加了position: fixed; height: 100%; width: 100%;来解决该问题，但它创建了另一个问题，使我的页面在模式打开时“跳转”到顶部。我试图应用一些在这里和其他来源找到的解决方案，但没有成功。关于如何停止跳到顶部的事情有什么建议吗？干杯！

Answer 1

检查这个简单的例子。初始文档的高度超过了视口的高度，因此可以向下滚动。无论此垂直滚动位置如何，当打开模式对话框时，页面都不会跳转，而当关闭模式时，将恢复（不变）初始文档的滚动位置。

$(function() {
  $('.test').click(function() {
    $(document.body).css('overflow', 'hidden');
    $('#overlay').show();
  });
  $('#overlay').click(function() {
    $(document.body).css('overflow', 'initial');
    $(this).hide();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="overlay" style="position: fixed; overflow-y: scroll; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.4); display: none">
  <div style="width: auto; margin: 60px auto; max-width: 300px; border: 1px blue solid; position: relative; height: 1500px;">Some content<br/>in the modal<br/>dialogue<br/><br/>Some content<br/>in the modal<br/>dialogue<br/><br/>Some content<br/>in the modal<br/>dialogue<br/><br/>Some content<br/>in the modal<br/>dialogue<br/><br/>Some content<br/>in the modal<br/>dialogue<br/><br/>Some content<br/>in the modal<br/>dialogue<br/><br/>
  </div>
</div>

<div style="border: 1px red solid; width: 200px; height: 1800px;">
<a href="javascript:void(0);" class="test">Click</a><br/><br/>
<a href="javascript:void(0);" class="test">Click</a><br/><br/>
<a href="javascript:void(0);" class="test">Click</a><br/><br/>
<a href="javascript:void(0);" class="test">Click</a><br/><br/>
<a href="javascript:void(0);" class="test">Click</a><br/><br/>
<a href="javascript:void(0);" class="test">Click</a><br/><br/>
<a href="javascript:void(0);" class="test">Click</a><br/><br/>
<a href="javascript:void(0);" class="test">Click</a><br/><br/>
<a href="javascript:void(0);" class="test">Click</a><br/><br/>
<a href="javascript:void(0);" class="test">Click</a><br/><br/>
<a href="javascript:void(0);" class="test">Click</a><br/><br/>
<a href="javascript:void(0);" class="test">Click</a><br/><br/>
<a href="javascript:void(0);" class="test">Click</a><br/><br/>
<a href="javascript:void(0);" class="test">Click</a><br/><br/>
</div>

Answer 2

找不到任何解决方案后，我只使用了 body-scroll-lock npm软件包，该软件包在任何情况下都可以正常工作。太糟糕了，我无法独自找到解决方案，但是如果有人遇到相同的问题，请检查一下。

在iOS中禁用模式背景滚动

2 个答案: