zoukankan      html  css  js  c++  java
  • 微信浏览器 -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超过可滚动距离,因此只判断严格的触底条件即可。

  • 相关阅读:
    Codeforces Round #601 (Div. 2)
    A. A Serial Killer
    B. Sherlock and his girlfriend
    Codeforces Round #600 (Div. 2)
    Manthan, Codefest 19 (open for everyone, rated, Div. 1 + Div. 2) C. Magic Grid
    7213:垃圾炸弹
    2011
    Educational Codeforces Round 46 (Rated for Div. 2)
    Stall Reservations
    Pots
  • 原文地址:https://www.cnblogs.com/defghy/p/8366378.html
Copyright © 2011-2022 走看看