如何使用用户控制的切换（启用/禁用）禁用iOS设备（iPad，iPhone，Mac）上的滚动/滚动 [英] How to disable scroll / scrolling on iOS devices (iPad, iPhone, Mac) with user-controlled toggle (enable / disable)
问题描述
在回顾StackOverflow上有关此主题的许多问题和答案时，所提供的解决方案都无法可靠地运行。所有CSS，JavaScript，jQuery和混合解决方案至少有一个缺陷，阻止滚动有效地禁用和/或切换。
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.
我还搜索了网络高广泛而且没有找到一个好的答案。
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");
});
}
...这将添加溢出：隐藏; 到我想要的任何类 onclick ，并在第二次点击时将其删除。
...which will add a overflow: hidden; to any class I want onclick, and remove it on second click.
问题是，此代码不适用于iOS设备。
The thing is, this code doesn't work with iOS devices.
我如何才能使用iOS设备？
How could I make this work with iOS devices?
理想情况下，我更喜欢纯CSS解决方案。但我知道这可能是不可能的，尤其是切换组件。
Ideally, I would prefer a pure CSS solution. But I understand that this may not be possible, especially the toggle component.
任何JavaScript或jQuery解决方案都可以。
Any JavaScript or jQuery solution would be fine, as well.
提前致谢！
推荐答案
禁用iOS设备上的滚动/滚动（iPad，iPhone） ，Mac）与jQuery
我认为这可以让你接近你想要的。唯一的问题可能是切换，即两个按钮（启用和禁用）。如果您想将切换设置为单个按钮，也许您可以发布单独的问题，或者其他人可以改进此答案。 （我主要是一个HTML / CSS / PHP人。我对JS有些新手。）
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).
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
禁用滚动/使用CSS在iOS设备（iPad，iPhone，Mac）上滚动
对于在iOS设备上禁用滚动的纯CSS解决方案，请尝试以下选项：
（当然，这些都没有切换。）
For a pure CSS solution to disable scrolling on iOS devices try these options:
(Of course, these have no toggle.)
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.
-
- 禁用网页上的所有滚动
- iPhone Web App - 在iOS8中停止身体反弹/滚动
- ipad safari：禁用滚动和跳出效果？
- iPhone Web App - 停止正文滚动
- iOS Safari - 如何禁用过度滚动但允许可滚动的div正常滚动？
- 启用/禁用在iPhone / iPad的Safari中滚动
- iOS阻止身体滚动
- 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
这篇关于如何使用用户控制的切换（启用/禁用）禁用iOS设备（iPad，iPhone，Mac）上的滚动/滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
