在iOS中禁用模式背景滚动

Question

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

目前，我使用overflow: hidden在主体上 ，这对chrome和android很好，但是在Safari和iOS中是不够的，因为它让我在模式后面滚动。 所以我增加了position: fixed; height: 100%; width: 100%; 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软件包，该软件包在任何情况下都可以正常工作。 太糟糕了，我无法独自找到一个解决方案，但是如果有人遇到相同的问题，请检查一下。