前言
最近用ionic来开发微信公众号，看好的就是ionic有成熟的UI框架，不需要自己去定义UI控件，当然微信也提供了自家的UI控件，但是数量实在太少，不敢恭维。
因为一直用的是chrome调试开发的页面，测试的时候也没有发现什么问题，但是直到将代码放上服务器，然后通过iPhone手机的微信公众号来访问开发的网页，在滑动到顶部或者底部的时候，重复上滑或者重复下滑，会导致页面卡死，需要2，3秒后才能恢复正常。瞬间奔溃，这是个什么玩意儿。在百度上查了一下资料原来是-webkit-overflow-scrolling:touch引起的，有前端开发经验的人都知道，这个属性是给网页在iOS设备中呈现并滚动的时候，起到更加流畅的作用，有一个回弹的效果，跟原生iOS滑动的效果一样，没想到反而给iOS设备挖了这么大的一个坑，wtf....
分析
经网上查找一些资料描述是Safari会对使用-webkit-overflow-scrolling的网页，会创建一个UIScrollView，给要显示的元素使用。具体可以参考这篇文章，文章的作者也是遇到这个问题，并且估计快被逼疯了...
通过chrome检查元素可以看到在网页编译并且跑起来之后，ionic有生成了一个类名为“scroll-content”的div，这个div就是使用了-webkit-overflow-scrolling:touch，仔细查看了资料包括上面那篇文章，说是可以通过给滚动的元素的内部加一个div元素，然后设置这个内部的div的高度100%+1px或100%+1%可以解决，有些人就说是通过修改z-index，还有些人说是不要让那个滚动的元素有relative或者absolute这样的css定位。由于是在ionic的框架上进行开发的页面，查找了元素“scroll-content”这个div确实有绝对定位，刚开始很担心是ionic框架的问题，难道这次要翔，但是上面的方法全部试了个遍，可以很负责任的告诉你，没有用，没有用，没有用，不论是ios设备的微信浏览器，safari浏览器，QQ浏览器，UC浏览器，都是会存在这个卡死的问题。
解决方案
想了好久，既然是-webkit-overflow-scrolling:touch引起的，那么不用这个属性就行了嘛，但是不用这个属性，页面滑动起来真的是还不如让这个bug留着，那感觉就像你看了一部无声的，黑白的，画质贼差的电影。接着往下思考，既然是在顶部或者底部的时候会出现卡死，那么不如通过touchstart和touchmove事件来判断是否到达顶部或者底部，然后移除-webkit-overflow-scrolling:touch，不满足的时候就重新加上-webkit-overflow-scrolling:touch，这样就不会影响滑动，实际上也是有点效果了，可以滑动一点点，但是你疯狂的滑动，还是会出现卡死。
当然这种方案是不行的，所以最后还是通过判断是否到达底部或者顶部添加event.preventDefault()；来解决，在网上也有人
说这样是可行的。
但是这边还有一个需要注意的点就是，如果你的页面有刷新和加载分页，那么你就需要注意设置event.preventDefault()的时机。
如果有下拉刷新，那么在scrollTop为0的时候，就不能设置event.preventDefault()；如果有加载分页，那么你就需要直到滑动到最后一页的时候，才能设置event.preventDefault()，否者你一加载更多，页面立马就卡死了。
下面是我代码：
preventFreezeAtTopOrBottomForIOS(isGetRefresher,contenClassName){
if(this.isIOS()){
let contentEle = document.getElementsByClassName(contenClassName)[0];
let lastY = 0; // Needed in order to determine direction of scroll.
contentEle.getElementsByClassName("scroll-content")[0].addEventListener('touchstart', function(event) {
lastY = event.touches[0].clientY;
});
//获取滚动元素
let scrollEle = contentEle.getElementsByClassName("scroll-content")[0];
//先移除监听事件
scrollEle.removeEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
//再添加监听事件
scrollEle.addEventListener('touchmove', function(event) {
let top = event.touches[0].clientY;
// Determine scroll position and direction.
let scrollTop = scrollEle.scrollTop;
// console.log("--scrollTop--" + scrollTop);
let scrollHeight = scrollEle.scrollHeight;
// console.log("--scrollHeight--" + scrollHeight);
let clientHeight = scrollEle.clientHeight;
// console.log("--clientHeight--" + clientHeight);
let direction = (lastY - top) < 0 ? "up" : "down";
// FIX IT!
if (scrollTop == 0 && direction == "up") {
console.log("--到顶部--");
// Prevent scrolling up when already at top as this introduces a freeze.
if(!isGetRefresher){//没有头部刷新的，需要设置防止头部freeze
event.preventDefault();
}
} else if (scrollTop >= (scrollHeight - clientHeight) && direction == "down") {
// Prevent scrolling down when already at bottom as this also introduces a freeze.
event.preventDefault();
console.log("--到底部--");
}
lastY = top;
});
}
}
由于我是使用ionic框架来开发的，所以我这边实际上滚动是“scroll-content”这个div，并且每一个页面都有一个“scroll-content”，所以你在获取对应的页面对应不同的“scroll-content”的时候，可以通过给ion-content设置class来获取其下面的元素“scroll-content”。
参数说明：
其中的contentClassName就是各个页面的ion-content对应的classname，注意需自己给ion-content设置唯一的classname，isGetRefresher 就是判断是否有下拉刷新，是boolean类型，至于加载更多，你不需要限制，只需要我上面说的，加载到最后再调用上面那段代码。反正就是内容高度一变化，你就得重新设置。
总结
感觉这种方法是比较好的解决方法了。如果你有其他更好的方法可以告诉我（估计你也没有😄），被这个bug折磨了很久，总算是消停了，当然还是希望官方可以解决这个bug。
