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

Question

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

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

到目前为止，我具有此功能：

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

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

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

如何在iOS设备上使用此功能？

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

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

提前致谢！

Answer 1

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

\n\n

我认为这会让你更接近你想要的。唯一的问题可能是切换按钮，它有两个按钮（启用和禁用）。如果您想将切换设置为单个按钮，也许您可​​以发布一个单独的问题，或者其他人可以改进这个答案。（我主要是一个 HTML / CSS / PHP 人员。我对 JS 有点陌生）。

\n\n

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

\n\n

信用：https ://stackoverflow.com/a/17597303/3597276

\n\n\n\n

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

\n\n

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

\n\n

html, body {\n    position: fixed;\n}\n\nhtml, body {\n    position: relative;\n    overflow: hidden;\n}\n\nbody {\n    position: fixed;\n    overflow: hidden;\n}\n\nbody {\n    position: fixed;\n    height: 100%;\n    overflow: hidden;\n    width: 100%;\n}\n

\n\n\n\n

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

\n\n

\n
• 在 iPhone Web 应用程序中禁用滚动？
\n
• 禁用网页上的所有滚动
\n
• iPhone Web 应用程序 - 在 iOS8 中停止身体弹跳/滚动
\n
• ipad safari：禁用滚动和弹跳效果？
\n
• iPhone Web App - 停止正文滚动
\n
• iOS Safari \xe2\x80\x93 如何禁用过度滚动但允许可滚动 div 正常滚动？
\n
• 在 iPhone/iPad\xe2\x80\x99s Safari 中启用/禁用滚动
\n
• iOS 防止在 body 上滚动
\n

\n