如果在小屏幕上，我的网站将其菜单更改为汉堡菜单按钮，如果单击该按钮，将切换侧边栏，其中包含菜单的堆叠版本。这个侧边栏位于普通网站的顶部(position: fixed; z-index: 5;)。切换侧边栏时，也会切换 body-overlay。这可以防止您点击实际网站上的任何链接。
我想做的是删除网站主体的滚动功能，但仍允许在该菜单侧边栏中滚动，因为例如在 iPhone 4 上它太大而无法适应屏幕。
如果侧边栏处于事件状态(显示)，我试图通过在主体上设置 overflow-y: hidden; 来获得此行为。此外，我给侧边栏添加了一个 overflow-y: scroll;。这确实有效，但仅适用于计算机(如果屏幕大小调整为移动设备的宽度)。
不幸的是，这在我的 iPhone 上没有效果。如果我滚动，我实际上是在滚动正文而不是侧边栏...
那么如何关闭手机的滚动功能呢？
我知道可以在 JavaScript 中执行以下操作，但这不会让您在侧边菜单栏中滚动...
document.ontouchstart = function(e){
e.preventDefault();
}
已解决
HTML 结构
<body>
<div class="mobile-nav closed">
<!-- Menu -->
</div>
<div class="body-overlay"></div>
<!-- Page Content -->
</body>
jQuery 代码
$( '.hamburger' ).on( 'click', function( e ) {
$( this ).toggleClass( 'is-active' );
$( '.mobile-nav' ).toggleClass( 'closed' );
$( '.body-overlay' ).fadeToggle( 300 );
$( 'body' ).toggleClass( 'no-scroll' ).promise().done( function(){
var touchScroll = function( event ) {
event.preventDefault();
};
if ( $(this).hasClass( 'no-scroll' ) ) {
$( '.body-overlay' ).bind( 'touchmove', touchScroll );
$( '.mobile-nav' ).unbind( 'touchmove', touchScroll );
}
else {
$( '.body-overlay' ).unbind( 'touchmove', touchScroll );
}
} );
e.preventDefault();
} );
这段代码运行良好。 $('.hamburger') 是汉堡菜单按钮。它的类 .is-active 将其更改为十字。第二条和第三条的说法应该很清楚了。第四个陈述很有趣。在 body 上，我正在切换 .no-scroll 类，它为 body 设置了一个 overflow-y: hidden 和一个 overflow-y: scroll 到菜单。如前所述，这对移动设备没有影响，因此作为回调，我正在触发另一个功能。在该函数中，我首先将一个函数存储在一个变量中，然后检查主体是否具有 .no-scroll 类(菜单已打开)或者是否没有(菜单已关闭).如果菜单打开，我将阻止在 .body-overlay 上滚动(body 没有不 工作)但允许在导航上滚动.如果菜单正在关闭，则必须解除绑定(bind)，否则滚动仍将被禁用!
希望对您有所帮助! :)
最佳答案
干得好，有效的脚本。一些注意事项:
- 最佳做法是使用
.on和.off而不是.bind因为这些 已被弃用，如果您以后需要更新 jQuery 库，可能会导致问题。 - 您的
touchScroll函数不需要在这些 jQuery 中 函数调用，因为当前它不能被另一个函数访问 如果出于某种原因您想在其他地方再次调用它。 - 最后，您似乎从来没有解除绑定(bind)
touchScroll.body-overlay分区？如果这不是必需的(解除绑定(bind))那么最好 在你的 if 语句之外声明它，也许在这整个之前 js block 以避免重复调用它。
关于javascript - 有一个可滚动的菜单，但在手机上从正文中删除滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42045800/