如何在iOS设备（iPad，iPhone，Mac）上使用用户可控开关（启用/禁用）禁用滚动/滚动。

Question

如何在iOS设备（iPad，iPhone，Mac）上使用用户可控开关（启用/禁用）禁用滚动/滚动。

6

在StackOverflow上检查了许多与此话题相关的问题和答案，但提供的解决方案都不能可靠地工作。所有基于CSS、JavaScript、jQuery和混合解决方案都至少存在一个缺陷，防止滚动禁用和/或切换有效。

我还搜索了互联网，但没有找到一个好的答案。

目前我有这个函数：

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

我希望能够在需要的类上添加overflow: hidden;，并在第二次点击时将其删除。

问题是，这段代码在iOS设备上无法工作。

如何让这在iOS设备上正常运行？

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

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

提前致谢！

- Sebastian Alsina

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

使用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://dev59.com/5XTYa4cB1Zd3GeqPtlnN#17597303

使用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%;
}

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