微信浏览器 -webkit-overflow-scrolling 弹性滚动出现黑色背景，与ios弹性滚动冲突问题...

微信浏览器在为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超过可滚动距离，因此只判断严格的触底条件即可。

转载于:https://www.cnblogs.com/defghy/p/8366378.html