jQuery 移动菜单打开时如何禁用后台滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27230955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable scrolling in the background when the mobile menu is open?
提问by Rick Sanchez
I am building a mobile responsive website that has a nav menu. When I get to the bottom of the menu - If I continue scrolling when I reach the bottom of the menu - it scrolls the page in the background. How can I disable it?
我正在构建一个具有导航菜单的移动响应式网站。当我到达菜单底部时 - 如果我在到达菜单底部时继续滚动 - 它会在后台滚动页面。我怎样才能禁用它？
This is my jQuery code so far:
到目前为止，这是我的 jQuery 代码：
// When the document is loaded...
$(document).ready(function() {
$('#mob-menu-btn').click(function(){
$('.sports').slideToggle("slow");
})
$('#sub-menu').click(function(){
$('.sports2').slideToggle("slow");
})
});
and this is my CSS:
这是我的 CSS：
.list{
width: 100%;
overflow: hidden;
overflow-y: auto;
top: -10%;
overflow: hidden;
overflow-y: auto;
}
.sports li{
list-style-image:none;
list-style-type: none;
border-bottom: 2px solid #eeeeee;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 10px;
width:100%;
font-family: arial;
text-decoration: none;
overflow: hidden;
}
回答by Gibbs
When menu is open, set position fixed to the body. When you close it, remove that property. Better use add/remove class.
当菜单打开时，设置固定到身体的位置。当您关闭它时，删除该属性。更好地使用添加/删除类。
if($('#mob-menu').is(':visible'))
{
$('body').addClass("fixedPosition");
}
else
{
$('body').removeClass("fixedPosition");
}
.fixedPosition
{
position: fixed;
}
回答by Seppe Beelprez
Instead of using position: fixed(which causes jumping back to the top when you open your menu) you can use overflow: hidden. If you are somewhere in you page and opens the menu it doesn't jump back to the top. (maybe the jumping is a problem of how i wrote my code, but it was helpful for me).
而不是使用position: fixed（这会导致跳回到当你打开你的菜单顶部）可以使用overflow: hidden。如果您在页面中的某个位置打开菜单，它不会跳回顶部。（也许跳跃是我如何编写代码的问题，但它对我有帮助）。
回答by Congrim
There is also slightly different approach to this problem. You can add onclickevent to your button. Then add/remove class to your body (similiar as previous answer, but taking the one before it into consideration). That's what was working for me, but insted of button I have checkbox, which checking toggles my mobile menu.
这个问题也有稍微不同的方法。您可以向按钮添加onclick事件。然后向您的身体添加/删除课程（与之前的答案相似，但要考虑之前的课程）。这就是对我有用的东西，但是我有复选框的按钮，它检查切换我的移动菜单。
Add this to your headsection:
将此添加到您的头部部分：
<script>
function lockScroll() {
if ($('body').hasClass('lock-scroll')) {
$('body').removeClass('lock-scroll');
}
else {
$('body').addClass('lock-scroll');
}
}
</script>
Then specify a class in CSS file/section:
然后在 CSS 文件/节中指定一个类：
.lock-scroll {
overflow: hidden;
}
And this would be your button:
这将是您的按钮：
<button type="button" id="#mob-menu-btn" onclick="lockScroll();">Click me!</button>
回答by Alexufo
Try fix body height
尝试修复体高
body.js-mobile-menu-open {
overflow: hidden;
height:100%;
}
回答by Andrew Konken
I would just make a minor change to the @roko's answer because I could never get the else statement to fire.
我只会对@roko 的回答做一个小改动，因为我永远无法触发 else 语句。
$("body").toggleClass("fixedPosition");
Then styling:
然后造型：
.fixedPosition
{
position: fixed;
}
