我的网站有一些叠加层（灯箱），我需要阻止页面在打开时在它们下面滚动。所以我使用一些jQuery将overflow: hidden;添加到body，html，#page。这在桌面浏览器上运行良好，但移动浏览器似乎不遵守规则。
我的页面结构是：
<html>
...
<body>
<div id="page">
...
</div>
</body>
</html>
我的jQuery只是在点击触发器时将类放在三个元素上。 jQuery正在工作（应用样式），我没有收到任何错误。
是否存在已知错误和/或已知修复程序？
答案 0 :(得分：2)
使用了大致相同的想法，但设置了noscroll类，而不是直接将样式应用于元素。
.noscroll { overflow: hidden; }
以前的工作，如果我没记错的话，直到iOS 7。
做了一些实验，看起来这就行了。
.noscroll { overflow: hidden; position: fixed; }
答案 1 :(得分：0)
这是我自己的实现。
在offcanvas菜单处于活动状态时，我遇到overflow无法正常工作的问题。我克服这个问题的方法是在overflow: hidden，position: fixed和html标记上应用body和#page，这会强制 noscroll <除了菜单本身以外的其他任何内容。
希望它有所帮助！
<强> HTML：
<header id="masthead">
<button type="button" class="toggle">Toggle</button>
</header>
<nav id="offcanvas-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque erat vel massa porttitor, ac sagittis velit vehicula. Nunc iaculis sapien justo, ac viverra mi convallis et. Sed ac massa lacinia, varius neque et, varius mi. Integer in ligula vitae arcu mollis mollis ut a tortor. Fusce quis tellus fringilla, venenatis arcu posuere, suscipit libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus hendrerit sodales leo, ac pellentesque odio fermentum nec. Ut feugiat in tortor quis cursus. Praesent porttitor imperdiet orci. Morbi sed ultricies velit. Nulla maximus rhoncus congue.</p>
<p>Proin nec pharetra tortor, eu sollicitudin ipsum. Morbi turpis magna, feugiat ornare pretium a, tristique ac urna. Phasellus rutrum sem a turpis tincidunt viverra in eget odio. Mauris a nibh eget lacus volutpat lobortis. Sed convallis posuere nisl, id blandit est posuere a. Duis tempor euismod nunc, ut suscipit ligula feugiat in. Phasellus congue nibh non vulputate consectetur.</p>
</div>
<强> LESS：
html.offcanvas-active,
html.offcanvas-active body
html.offcanvas-active #page {
overflow: hidden;
position: fixed;
}
html.offcanvas-active {
#masthead,
#page {
-webkit-transform: translate(-250px);
-moz-transform: translate(-250px);
transform: translate(-250px);
}
#offcanvas-menu {
right: 0;
}
}
body {
font-family: Arial, sans-serif;
}
#masthead {
.toggle {
float: right;
}
&:after {
visibility: hidden;
display: block;
content: "";
clear: both;
}
}
#masthead,
#page {
position: relative;
-webkit-transition: transform 1s ease-in-out;
-moz-transition: transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
#offcanvas-menu {
position: fixed;
top: 0; right: -250px;
width: 250px; height: 100%;
background-color: orange;
-webkit-transition: right 1s ease-in-out;
-moz-transition: right 1s ease-in-out;
transition: right 1s ease-in-out;
ul {
margin: 0; padding-left: 0;
list-style: none;
li {
a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #fff;
}
}
}
}
<强> JS / jQuery的：
$(document).ready(function() {
$('#masthead').on('click', '.toggle', function() {
$('html').toggleClass('offcanvas-active');
});
});