微信浏览器 -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