可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
This question already has an answer here:
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.
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 guidelines on how to prevent this and while they do work, they prevent inner scrollable elements from working altogether.
Here's a fiddle to demonstrate what I'm using so far.
Has anyone found a solution that disables body elastic scrolling but lets inner scrollables work?
回答1:
I've adapted the good solution from Conditionally block scrolling/touchmove event in mobile safari using Dojo:
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.
回答2:
Maybe iScroll is what you're looking for (if I got your question right)
回答3:
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.
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.
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.
Sigh. Frustrating.
