ios上整体页面可拖动问题

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以及安卓系统的微信浏览器中均有效。