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超过可滚动距离,因此只判断严格的触底条件即可。

  • 相关阅读:
    【php】session读写锁
    【php】set_include_path和get_include_path用法详解
    【php】header下载文件后,文件变大的问题;(ob_clean()清空缓存)
    php反射机制应用
    vue内置组件 transition 和 keep-alive 使用
    vue中$router以及$route的使用
    通过LxRunOffline迁移Win10的Linux子系统
    vue Router——进阶篇
    vue keep-alive
    go语法和特点零碎总结
  • 原文地址:https://www.cnblogs.com/defghy/p/8366378.html
Copyright © 2011-2022 走看看