微信浏览器在为scroll元素设置 -webkit-overflow-scrolling 时会使用ios弹性滚动特性。微信本身有黑色区域的弹性滑动。
在android下没什么问题,但是在ios下两者会产生冲突。
解决方法:
方法1. 网上流传最广的思路是设置touchmove的事件中preventDefault;但是这个方法有个问题是把ios的弹性滚动一并禁用掉了。
方法2:
发现微信的弹性滚动触发机制是 手指按下时并且此时scroll触顶(底),根据这个特性解决办法代码:
let scrollEle = document.body; scrollEle.addEventListener('touchstart', (evt) => { // 修复微信的黑色弹性滚动与ios冲突问题 let scrollTop = scrollEle.scrollTop; let scrollHeight = scrollEle.scrollHeight; let height = scrollEle.offsetHeight; let scrollTopTo; // 顶部 scrollTopTo = Math.max(scrollTop, 1); // 底部 if(scrollTopTo === scrollHeight - height) { scrollTopTo--; } if(scrollTop != scrollTopTo) { scrollEle.scrollTop = scrollTopTo; } });
原理:因为微信的弹性触发机制是手指按下时,scroll元素是否触顶。因此为了避免触发此特性,当手指按下时将scroll元素上移1px,这样就无法触发微信的弹性滚动,但是此时ios的弹性滚动依然生效。
底部的情况由于ios弹性滚动能够使scrollTop超过可滚动距离,因此只判断严格的触底条件即可。