标签 javascript css ios webkit scroll
<分区>
我目前正在开发针对触摸设备(主要是 iOS)优化的单页网络应用程序。我已经通过 -webkit-overflow-scrolling: touch; 实现了新的 iOS 原生滚动，并且一切正常，除了我们仍然在整个页面主体上体验苹果 flex 滚动效果。
这涉及到当滚动结束或正文被插入时整个页面从视口(viewport)的顶部/底部移开，并且真正暴露了这是一个网络应用程序的事实。我关注了various guidelines关于如何防止这种情况的发生，当它们起作用时，它们会阻止内部可滚动元素完全起作用。
Here's a fiddle来展示我目前使用的是什么。
有没有人找到禁用主体 flex 滚动但允许内部滚动的解决方案？
最佳答案
我已经从 Conditionally block scrolling/touchmove event in mobile safari 中采用了好的解决方案使用道场:
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();
}
}
});
在这种情况下，要滚动的元素是#content。
关于javascript - 禁用 iOS flex 体滚动并保持 native 滚动工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9108599/