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

How to disable scroll / scrolling on iOS devices (iPad, iPhone, Mac) with user-controlled toggle (enable / disable)

在查看 Whosebug 上关于此主题的许多问题和答案时，none 提供的解决方案工作可靠。所有 CSS、JavaScript、jQuery 和混合解决方案都至少有一个缺陷导致滚动条无法有效地禁用 and/or 切换。

我也在网上广泛搜索，但没有找到好的答案。

到目前为止我有这个功能：

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

...这会将 overflow: hidden; 添加到任何 class 我想要 onclick，并在第二次单击时将其删除。

事实是，此代码不适用于 iOS 设备。

如何在 iOS 设备上使用它？

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

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

提前致谢！

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

我认为这会让你接近你想要的。唯一的问题可能是切换，它是两个按钮（启用和禁用）。如果你想让切换按钮成为一个按钮，也许你可以 post 一个单独的问题，或者其他人可以改进这个答案。 （我主要是 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');
    });
});

信用：

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

要在 iOS 设备上禁用滚动的纯 CSS 解决方案，请尝试这些选项：
（当然，这些没有切换。）

html, body {
    position: fixed;
}

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

body {
    position: fixed;
    overflow: hidden;
}

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

这是我阅读的关于这个问题的一些 post 和文章。