javascript 禁用 iOS 弹性体滚动并保持本机滚动工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9108599/
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
Disabling iOS elastic body scroll & keep native scrolling working
提问by madcapnmckay
I am currently working on a single page web app optimized for touch devices, mainly iOS. I've implemented the new iOS native scrolling via -webkit-overflow-scrolling: touch;and all works well except that we are still experiencing the apple elastic scroll effect on the whole page body.
我目前正在开发针对触摸设备（主要是 iOS）优化的单页 Web 应用程序。我已经实现了新的 iOS 原生滚动-webkit-overflow-scrolling: touch;，除了我们仍然在整个页面主体上体验苹果弹性滚动效果之外，一切都运行良好。
This involves the whole page moving off the top/bottom of the viewport when a scroll ends or the body is pushed and really gives away the fact that this is a web app. I have followed various guidelineson how to prevent this and while they do work, they prevent inner scrollable elements from working altogether.
这涉及当滚动结束或主体被推动时整个页面从视口的顶部/底部移开，并且真正暴露了这是一个网络应用程序的事实。我遵循了关于如何防止这种情况的各种指导方针，当它们起作用时，它们会阻止内部可滚动元素完全起作用。
Here's a fiddleto demonstrate what I'm using so far.
这是一个小提琴来演示我目前使用的内容。
Has anyone found a solution that disables body elastic scrolling but lets inner scrollables work?
有没有人找到禁用身体弹性滚动但允许内部滚动工作的解决方案？
采纳答案by Thomas Bachem
I've adapted the good solution from Conditionally block scrolling/touchmove event in mobile safariusing Dojo:
我已经使用 Dojo从移动 Safari 中的 Conditionally block scrolling/touchmove 事件改编了好的解决方案：
var initialY = null;
dojo.connect(document, 'ontouchstart', function(e) {
initialY = e.pageY;
});
dojo.connect(document, 'ontouchend', function(e) {
initialY = null;
});
dojo.connect(document, 'ontouchcancel', function(e) {
initialY = null;
});
dojo.connect(document, 'ontouchmove', function(e) {
if(initialY !== null) {
if(!dojo.query(e.target).closest('#content')[0]) {
// The element to be scrolled is not the content node
e.preventDefault();
return;
}
var direction = e.pageY - initialY;
var contentNode = dojo.byId('content');
if(direction > 0 && contentNode.scrollTop <= 0) {
// The user is scrolling up, and the element is already scrolled to top
e.preventDefault();
} else if(direction < 0 && contentNode.scrollTop >= contentNode.scrollHeight - contentNode.clientHeight) {
// The user is scrolling down, and the element is already scrolled to bottom
e.preventDefault();
}
}
});
The element to be scrolled is #content in this case.
在这种情况下，要滚动的元素是 #content。
回答by jln-dk
回答by tim
At the risk of duplicating my post, I try to solve the same issue and so far am only this far:
冒着重复我的帖子的风险，我尝试解决同样的问题，到目前为止仅此而已：
$(document).bind("touchmove",function(e){
e.preventDefault();
});
$('.scrollable').bind("touchmove",function(e){
e.stopPropagation();
});
This works if you have an overflow element that doesn't cover the whole screen, like in an iPad app for example. but it doesn't work if you have a mobile app and the entire viewport is covered by your overflowed element.
如果您有一个未覆盖整个屏幕的溢出元素（例如在 iPad 应用程序中），则此方法有效。但如果您有一个移动应用程序并且整个视口都被溢出的元素覆盖，则它不起作用。
The only thing I could think of is to check the scrollTop() of the $('.scrollable') and then conditionally bind the preventDefault() if it's 0.
我唯一能想到的就是检查 $('.scrollable') 的 scrollTop() 然后有条件地绑定 preventDefault() 如果它是 0。
After trying, I noticed that the webkit UA reports scrollTop always as 0 when the element is scrolled to the top even when it does the "inside bounce" of the native overflow scroll. So i can't do anything since I'd require a negative scrollTop to set my condition.
尝试后，我注意到当元素滚动到顶部时，webkit UA 报告 scrollTop 始终为 0，即使它执行本机溢出滚动的“内部反弹”。所以我不能做任何事情，因为我需要一个负 scrollTop 来设置我的条件。
Sigh. Frustrating.
叹。令人沮丧。
