zoukankan      html  css  js  c++  java
  • 完美解决safari、微信浏览器下拉回弹效果。

    完美解决safari、微信浏览器下拉回弹效果,只保留局部回弹效果。

    CSS代码

    .box{
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }

    HTML代码

    <body class="box">
    
        <div class="scroll" style="height:1500px">
            
        </div>
        
    </body>

    JS代码

     
    var overscroll = function(el) {
        el.addEventListener('touchstart', function() {
            var top = el.scrollTop
            ,totalScroll = el.scrollHeight
            ,currentScroll = top + el.offsetHeight;
            if(top === 0) {
                el.scrollTop = 1;
            }else if(currentScroll === totalScroll) {
                el.scrollTop = top - 1;
            }
        });
    
        el.addEventListener('touchmove', function(evt) {
        if(el.offsetHeight < el.scrollHeight)
            evt._isScroller = true;
        });
    }
            
    overscroll(document.querySelector('.scroll'));
    document.body.addEventListener('touchmove', function(evt) {
        if(!evt._isScroller) {
            evt.preventDefault();
        }
    });
    参考网址:https://segmentfault.com/a/1190000007301527
  • 相关阅读:
    1.选择排序法
    24.桌面移动qq
    23.控制语句题目
    23.位运算实现加法
    22.dll调用技术
    21.MFC进制转换工具
    2.CString转换到char*
    20.原码反码补码及图形化界面
    11gR2 Agent 简介
    RAC数据库后台进程介绍
  • 原文地址:https://www.cnblogs.com/yongwang/p/7542815.html
Copyright © 2011-2022 走看看