当我的全屏覆盖导航打开时,我试图阻止正文滚动。我已经将 show-nav
类应用到具有属性 overflow: hidden
的主体,它在桌面上运行良好,但在 iPhone 上似乎不起作用。
因此,在阅读了有关 stackoverflow 的类似问题后,我尝试使用 e.preventDefault()
,它有效,但当导航关闭时主体仍将保持不可滚动,当导航关闭时如何重新启用滚动关闭了吗?
$( "button.navbar-toggle" ).on( "click", function(e) {
$('body').on('touchmove', function (e) {
e.preventDefault();
});
$('html').toggleClass('show-nav');
$('body').toggleClass('show-nav');
});
最佳答案
感谢@Tim 让我走上了正确的方向:这对我有用:
// On nav opens toggle show-nav class to html/body (overflow: hidden to prevent scroll on desktop) + disable scroll on mobile
$( "button.navbar-toggle#open-nav" ).on( "click", function(e) {
$('body').bind('touchmove', function(e){e.preventDefault()});
$('html').toggleClass('show-nav');
$('body').toggleClass('show-nav');
});
// On nav close toggle show-nav class to html/body (overflow: hidden to prevent scroll on desktop) + enable scroll on mobile
$( "button.navbar-toggle#close-nav" ).on( "click", function(e) {
$('body').unbind('touchmove');
$('html').toggleClass('show-nav');
$('body').toggleClass('show-nav');
});
// Clicking on any link will close nav + enable scroll on mobile
$('.site-nav ul.nav li').on("click", function(e) {
$('body').unbind('touchmove');
$('html').toggleClass('show-nav');
$('body').toggleClass('show-nav');
});
希望它能帮助遇到同样问题的其他人:)干杯!
关于jquery - 全屏覆盖打开时防止 body 在 iPhone 上滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25837709/