javascript - 在元素内部滚动时防止 HTML 滚动，不隐藏滚动条

Question

当用户在菜单内滚动时，我想防止正文或 html 滚动。但是，我不想设置 $('html').css('overflow','hidden'); 因为这会使整个文档右移。我只想在菜单内滚动或滑动时禁用 HTML 滚动。我试图搜索这个主题很多，但我发现没有任何东西对我有用。

FIDDLE

Answer 1

在菜单打开时设置:

var thisHeight = $(window).scrollTop();
$(window).on('scroll', function() {
    $('html,body').scrollTop(thisHeight);
});

$('.noScroll').on('touchstart' , function(e) { e.preventDefault(); })
$('.noScroll').on('touchmove' , function(e) { e.preventDefault(); })

关闭时是这样的:

$(window).off('scroll');
$('.noScroll').off('touchstart');
$('.noScroll').off('touchmove');
$('.noScroll').on('touchstart' , function(){ return true; });        
$('.noScroll').on('touchmove' , function(){ return true; });

你需要在文本div中为它添加一个class="noScroll"，检查FIDDLE。

iOS 解决方案基于:

How to unbind a listener that is calling event.preventDefault() (using jQuery)?

---

JSFIDDLE:http://jsfiddle.net/m2ga2ygo/4/ .

上传测试:https://liebdich.biz/develop/iosMobile.html .