js源生惯性滚动与回弹(备用)

Posted _ihhu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js源生惯性滚动与回弹(备用)相关的知识，希望对你有一定的参考价值。

js源生惯性滚动与回弹(备用)

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <meta charset="UTF-8" />
  <meta name="Keywords" content="" />
  <meta name="Description" content="" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta content="telephone=no" name="format-detection" />
  <meta content="email=no" name="format-detection" />
  <title>Document</title>
  <style>
    body{margin:0;padding:0;}
    div{position:relative;width:200px;height:300px;margin:3em auto;border:1px solid #CCC;overflow:hidden;-webkit-user-select:none;user-select:none;}
    ol{width:100%;}
    ol>li{height:30px;}
  </style>
 </head>
 <body>
  <div>
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </div>
  <script>
   function myScroll(ctx){
     var ol=ctx.firstElementChild||ctx.firstChild,
        offset=50,
        cur=0,
        isDown=false,
        vy=0,
        isInTransition=false;

        ctx.addEventListener("mousedown",function(e){
            if(isInTransition)return;
            clearTimeout(this._timer);

            vy=0;
            this._oy=e.clientY-cur;
            this._cy=e.clientY;
            this._oh=this.scrollHeight;
            this._ch=this.clientHeight;
            this._startTime=e.timeStamp;
            isDown=true;

        });

        ctx.addEventListener("mousemove",function(e){
            if(isDown)
          {
             if(e.timeStamp-this._startTime>40)
            {
               this._startTime=e.timeStamp;
               cur=e.clientY-this._oy;
               if(cur>0)
              {
                cur*=0.4;              
              }
              else if(cur<this._ch-this._oh)
              {
                cur=(cur+this._oh-this._ch)*0.4-this._oh+this._ch; 
              }
               setPos(cur);
            }
             vy=e.clientY-this._cy;
             this._cy=e.clientY;
          }

        },false);        

        ctx.addEventListener("mouseleave",mleave,false);

        ctx.addEventListener("mouseup",mleave,false);

        function setPos(y){
          ol.style.transform="translateY("+y+"px) translateZ(0)";
        }
        
        function ease(target){    
           isInTransition=true;           
           ctx._timer=setInterval(function(){
             cur-=(cur-target)*0.2;
             if(Math.abs(cur-target)<1)
             {
               cur=target;
               clearInterval(ctx._timer);
               isInTransition=false;
             }
             setPos(cur);            

           },20);
        }

        function mleave(e){
          if(isDown)
          {
            isDown=false;
            var t=this,friction=((vy>>31)*2+1)*0.5,oh=this.scrollHeight-this.clientHeight;

            this._timer=setInterval(function(){
              vy-=friction;
              cur+=vy;
              setPos(cur);

              if(-cur-oh>offset)
              {                
                clearTimeout(t._timer);
                ease(-oh);
                return;
              }
              if(cur>offset)
              {
                clearTimeout(t._timer);
                ease(0);
                return;
              }
              if(Math.abs(vy)<1)
              {  
                clearTimeout(t._timer);
                if(cur>0)
                {
                  ease(0);
                  return;
                }
                if(-cur>oh)
                {
                   ease(-oh);
                   return;
                }
              }
            },20);


          }
        }
   }

   myScroll(document.querySelector("div"));
  </script>
 </body>
</html>

 

以上是关于js源生惯性滚动与回弹(备用)的主要内容，如果未能解决你的问题，请参考以下文章

物理学的 H5 应用：模拟惯性滑动

使用原生js封装webapp滑动效果(惯性滑动滑动回弹)

ios 下防止整个网页滑动(阻尼回弹 . 瞒天过海,骗IOS，把阻尼回弹限制在滚动区div内

解决iscoll.js 与jquery的AJAX配合使用时会造成回弹的问题

-webkit-overflow-scrolling 与滚动回弹效果.

Android多点触控技术，实现对图片的放大缩小平移，惯性滑动等功能