因为做一个 底部是固定的导航,头部是固定标题(全为absolute定位,ios系统下的fixed布局有bug), 中间是内容页。
首先这三部分保持在同一个层级,内容部分因为有下拉刷新的功能,所以页面是有垂直滚动条的。
在ios系统中发现,当touch位置在比较偏上或者偏下的情况下,手指拖动整个页面,会导致整个页面整体被拖动,然后内容页的滚动部分会发生卡顿,不能滑动的问题。试过网上的很多方法,比如:给有overflow:srcoll的元素增加
-webkit-overflow-scrolling: touch;
样式,增加弹性;给body增加一个监听touchmove事件,当监听到事件时,event.preventDefault();阻止事件发生,但是此时发现页面中需要滚动的部分也没有效果了,给单独需要监听touchmove事件的dom元素设置监听也无效。亲测下面这个方法有效,所有的头部、内容部分和底部导航全部用的absolute定位写好。
var startY = 0;
var scrollBox = document.querySelector('.mui-content');
document.body.addEventListener('touchstart', function(e){
startY = e.touches[0].pageY;
}, { passive: false });
document.body.addEventListener('touchmove', function(e) {
var moveY = e.touches[0].pageY;
var top = scrollBox.scrollTop;
var ch = scrollBox.clientHeight;
var sh = scrollBox.scrollHeight;
if (!isChildTarget(e.target, scrollBox)) {
e.preventDefault();
} else if ((top === 0 && moveY > startY) || (top + ch === sh && moveY < startY)) {
e.preventDefault();
}
}, { passive: false });
function isChildTarget(child, parent, justChild) {
// justChild为true则只判断是否为子元素,若为false则判断是否为本身或者子元素 默认为false
var parentNode;
if (justChild) {
parentNode = child.parentNode;
} else {
parentNode = child;
}
if (child && parent) {
while (parentNode) {
if (parent === parentNode) {
return true;
}
parentNode = parentNode.parentNode;
}
}
return false;
}
其中 .mui-content为内容部分,需要scroll滚动条。在ios以及安卓系统的微信浏览器中均有效。