Javascript 如何使用用户控制的切换（启用/禁用）在 iOS 设备（iPad、iPhone、Mac）上禁用滚动/滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31799970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable scroll / scrolling on iOS devices (iPad, iPhone, Mac) with user-controlled toggle (enable / disable)
提问by Sebastian Alsina
In reviewing the many questions and answers on this topic on StackOverflow, none of the solutions provided worked reliably. All CSS, JavaScript, jQuery and hybrid solutions had at least one deficiency that prevented the scroll from disabling and/or toggling effectively.
在查看 StackOverflow 上有关此主题的许多问题和答案时，所提供的解决方案都没有可靠地工作。所有 CSS、JavaScript、jQuery 和混合解决方案都至少有一个缺陷，无法有效地禁用和/或切换滚动。
I've also searched the web high and wide and have not found a good answer.
我也在网上广泛搜索，但没有找到好的答案。
So far I have this function:
到目前为止，我有这个功能：
function toggleScroll(btn, item) {
$(btn).click(function() {
$(item).toggleClass("noscroll");
});
}
...which will add a overflow: hidden;to any class I want onclick, and remove it on second click.
...这会将 a 添加overflow: hidden;到我想要的任何类onclick，并在第二次单击时将其删除。
The thing is, this code doesn't work with iOS devices.
问题是，此代码不适用于 iOS 设备。
How could I make this work with iOS devices?
我怎样才能在 iOS 设备上做到这一点？
Ideally, I would prefer a pure CSS solution. But I understand that this may not be possible, especially the toggle component.
理想情况下，我更喜欢纯 CSS 解决方案。但我知道这可能是不可能的，尤其是切换组件。
Any JavaScript or jQuery solution would be fine, as well.
任何 JavaScript 或 jQuery 解决方案都可以。
Thanks in advance!
提前致谢！
采纳答案by Michael Benjamin
Disable Scroll / Scrolling on iOS Devices (iPad, iPhone, Mac) with jQuery
使用 jQuery 在 iOS 设备（iPad、iPhone、Mac）上禁用滚动/滚动
I think this gets you close to what you want. The only issue may be the toggle, which is two buttons (Enable and Disable). If you want to make the toggle a single button, maybe you can post a separate question or somebody else can improve upon this answer. (I'm mostly an HTML / CSS / PHP guy. I'm somewhat new to JS).
我认为这让你接近你想要的。唯一的问题可能是切换，它是两个按钮（启用和禁用）。如果您想让切换成为单个按钮，也许您可以发布一个单独的问题，或者其他人可以改进此答案。（我主要是一个 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');
});
});
credit: https://stackoverflow.com/a/17597303/3597276
信用：https: //stackoverflow.com/a/17597303/3597276
Disable Scroll / Scrolling on iOS Devices (iPad, iPhone, Mac) with CSS
使用 CSS 在 iOS 设备（iPad、iPhone、Mac）上禁用滚动/滚动
For a pure CSS solution to disable scrolling on iOS devices try these options:
(Of course, these have no toggle.)
对于在 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 are some of the posts and articles I read on this issue.
以下是我阅读的有关此问题的一些帖子和文章。
- 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
