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

【问题标题】：How to disable scroll / scrolling on iOS devices (iPad, iPhone, Mac) with user-controlled toggle (enable / disable) [duplicate]如何使用用户控制的切换（启用/禁用）在 iOS 设备（iPad、iPhone、Mac）上禁用滚动/滚动 [重复]
【发布时间】：2015-10-26 07:24:15
【问题描述】：

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

我也在网上搜索了很多，但没有找到一个好的答案。

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

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

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

问题是，此代码不适用于 iOS 设备。

如何在 iOS 设备上进行这项工作？

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

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

提前致谢！

【问题讨论】：

标签： javascript jquery html ios scroll

【解决方案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）上禁用滚动/滚动

对于在 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%;
}

以下是我阅读的关于这个问题的一些帖子和文章。

【讨论】：

那么如何在单击按钮时将滚动锁定到当前位置，然后在第二次单击同一按钮时解锁？
这已涵盖here 和here。
这些解决方案包括通过按下 2 个按钮来启用和禁用。一关一开。我将如何用一个按钮做到这一点？点击 = 滚动，再次点击 = 滚动？
如果我的回答没有解决您的问题，请告诉我。我可能需要更好地理解这些功能，因为我对 JS 比较陌生。
确实如此！只是不是一路。我想我有一个解决方案，我会告诉你的。