1、因为页面旋转后超出了页面导致页面可拖拽
由于使用了position: absolute;和transform: rotate(15deg);,页面旋转后超出了页面,在安卓上正常,但是在ios上页面可以整个进行拖拽。
在排查问题时,按网上建议,在根元素html和body上加overflow:hidden,虽然在浏览器上无法滑动,但是到了移动端还是可以左右滑动,然后一层层排查,直到在使用了transform:rotate属性的元素父级(最近的position不为static的父级)加上overflow:hidden,才解决了问题。
2、ios系统的微信浏览器中 h5页面 整体可以拖动
做一个底部是固定的导航,头部是固定标题(全为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以及安卓系统的微信浏览器中均有效。