如何使用用户控制的切换(启用/禁用)在iOS设备(iPad、iPhone、Mac)上禁用滚动/滚动

Question

在回顾StackOverflow上关于此主题的许多问题和答案时，所提供的解决方案都不可靠。所有的CSS、JavaScript、jQuery和混合解决方案都有至少一个缺陷，使滚动无法有效地禁用和/或切换。

我也在网上到处搜索，都没有找到一个好的答案。

到目前为止，我有这个函数：

function toggleScroll(btn, item) {
 $(btn).click(function() {
  $(item).toggleClass("noscroll");
 });
}

...which会将一个overflow: hidden;添加到我想要onclick的任何类中，并在第二次单击时将其删除。

问题是，这个代码不能在iOS设备上工作。

我如何在iOS设备上实现这一点？

理想情况下，我更喜欢纯CSS解决方案。但我知道这可能是不可能的，特别是切换组件。

任何JavaScript或jQuery解决方案都可以。

提前感谢！

Answer 1

使用jQuery在iOS设备(iPad、iPhone、Mac)上禁用滚动/滚动

我想这会让你更接近你想要的。唯一的问题可能是切换，这是两个按钮(启用和禁用)。如果你想让切换成为一个单独的按钮，也许你可以发布一个单独的问题，或者其他人可以改进这个答案。(我主要是一个HTML / CSS / PHP的人。我对JS有些陌生)。

var disableScroll = false;
var scrollPos = 0;
function stopScroll() {
    disableScroll = true;
    scrollPos = $(window).scrollTop();
}
function enableScroll() {
    disableScroll = false;
}
$(function(){
    $(window).bind('scroll', function(){
         if(disableScroll) $(window).scrollTop(scrollPos);
    });
    $(window).bind('touchmove', function(){
         $(window).trigger('scroll');
    });
});

图片来源：https://stackoverflow.com/a/17597303/3597276

使用CSS在iOS设备(iPad、iPhone、Mac)上禁用滚动/滚动

要使用纯CSS解决方案来禁用iOS设备上的滚动，请尝试以下选项：

(当然，这些没有切换。)

html, body {
    position: fixed;
}

html, body {
    position: relative;
    overflow: hidden;
}

body {
    position: fixed;
    overflow: hidden;
}

body {
    position: fixed;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

以下是我在这个问题上读到的一些帖子和文章。

• Disable scrolling in an iPhone web application?
• Disable all scrolling on webpage
• iPhone Web App - Stop body bounce/scrolling in iOS8
• ipad safari: disable scrolling, and bounce effect?
• iPhone Web App - Stop body scrolling
• iOS Safari – How to disable overscroll but allow scrollable divs to scroll normally?
• Enable/Disable Scrolling in iPhone/iPad’s Safari
• iOS prevent scrolling on body