zoukankan      html  css  js  c++  java
  • zeptoJS:如何像jQuery一样,让滚动变得优雅?

    利用jQuery的animate() 方法,我们很容易实现滚动条的平滑滚动效果:

    $(function() {
        $('#top').click(
            function (e) {
                $('html, body').animate({scrollTop: '0px'}, 1000);
                return false;
            }
        );
    });
    

      

    在线示例:利用jQuery实现的返回顶部

    最近在做基于zeptoJS手机网页开发,遇到类似需求,实践之后发现zeptoJS并不像Jquery一样支持scrollTop()方法,

    所以,即使引入使zeptoJS支持The animate()方法的 fx.js 之后,依然无法实现平滑滚动效果。

     

    GOOGLE了一下发现,原来并不是我一人遇到这种问题,Stack Overflow早已有大量相关讨论:

     

    以上讨论给出了很多解决方案,目前我采用了下面这种:

     ZeptoScroll  插件

     GitHub地址:https://github.com/suprMax/ZeptoScroll

     官网地址:http://max.degterev.me/blog/zepto-scrolling

     zepto.scroll.js

    /* Author:
        Max Degterev @suprMax
    */
    
    ;(function($) {
      var DEFAULTS = {
        endY: $.os.android ? 1 : 0,
        duration: 200,
        updateRate: 15
      };
    
      var interpolate = function (source, target, shift) {
        return (source + (target - source) * shift);
      };
    
      var easing = function (pos) {
        return (-Math.cos(pos * Math.PI) / 2) + .5;
      };
    
      var scroll = function(settings) {
        var options = $.extend({}, DEFAULTS, settings);
    
        if (options.duration === 0) {
          window.scrollTo(0, options.endY);
          if (typeof options.callback === 'function') options.callback();
          return;
        }
    
        var startY = window.pageYOffset,
            startT = Date.now(),
            finishT = startT + options.duration;
    
        var animate = function() {
          var now = Date.now(),
              shift = (now > finishT) ? 1 : (now - startT) / options.duration;
    
          window.scrollTo(0, interpolate(startY, options.endY, easing(shift)));
    
          if (now < finishT) {
            setTimeout(animate, options.updateRate);
          }
          else {
            if (typeof options.callback === 'function') options.callback();
          }
        };
    
        animate();
      };
    
      var scrollNode = function(settings) {
        var options = $.extend({}, DEFAULTS, settings);
    
        if (options.duration === 0) {
          this.scrollTop = options.endY;
          if (typeof options.callback === 'function') options.callback();
          return;
        }
    
        var startY = this.scrollTop,
            startT = Date.now(),
            finishT = startT + options.duration,
            _this = this;
    
        var animate = function() {
          var now = Date.now(),
              shift = (now > finishT) ? 1 : (now - startT) / options.duration;
    
          _this.scrollTop = interpolate(startY, options.endY, easing(shift));
    
          if (now < finishT) {
            setTimeout(animate, options.updateRate);
          }
          else {
            if (typeof options.callback === 'function') options.callback();
          }
        };
    
        animate();
      };
    
      $.scrollTo = scroll;
    
      $.fn.scrollTo = function() {
        if (this.length) {
          var args = arguments;
          this.forEach(function(elem, index) {
            scrollNode.apply(elem, args);
          });
        }
      };
    }(Zepto));
    

      

    DEMO:

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    	
        <title>ZeptoScroll</title>
        <style type="text/css">
            
        #main{
            font: normal 13px/1.4em Helvetica, Arial, sans-serif;
             96%;
            padding: 2%;
            max- 320px;
            margin: 0 auto;
            background-color: #f5f5f5;
            color:#666;
        }
    
        #top {
          display: inline-block;
          padding: 6px 0;
          color: #fff;
           100%;
          cursor: pointer;
          text-align: center;
          border-radius: 3px;
          background-color: #00bb9c;
          text-decoration: none;
        }
        </style>
    </head>
    <body>
        <div id="main">
    	<h1>Add some gold.</h1>
    	<p>Look what I'm dealing with, man. I'm dealing with fools and trolls. I'm dealing with soft targets, and it's just strafing runs in my underwear before my first cup of coffee … they lay down with their ugly wives and their ugly children and just look at their loser lives and then they look at me and say, 'I can't process it.' Well, no, and you never will! Stop trying! Just sit back and enjoy the show.</p>
    
    	<p>I am on a drug. It's called Charlie Sheen. It's not available. If you try it once, you will die. Your face will melt off and your children will weep over your exploded body.</p>
    
    	<p>It's being directed and written by a genius named David Ward who, I don't know, won the Academy Award at 23 for writing The Sting? 
    It was his pen and his vision that created the classic that we know today as Major League. In fact,
    a lot of people think the movie's called Wild Thing, as they should. Whatever … If they want me in it, it's a smash. If they don't, it's a turd that opens on a tugboat.</p> <p>I tried marriage. I'm 0 for 3 with the marriage thing. So, being a ballplayer — I believe in numbers. I'm not going 0 for 4. I'm not wearing a golden sombrero.</p> <p>Look what I'm dealing with, man. I'm dealing with fools and trolls.
    I'm dealing with soft targets, and it's just strafing runs in my underwear before my first cup of coffee …
    they lay down with their ugly wives and their ugly children and just look at their loser lives and then they look at me and say, 'I can't process it.' Well, no, and you never will! Stop trying! Just sit back and enjoy the show.</p> <p>I am on a drug. It's called Charlie Sheen. It's not available. If you try it once, you will die. Your face will melt off and your children will weep over your exploded body.</p> <a id="top" href="javascript:void(0);">To the top, please!</a> </div> <script src="http://libs.baidu.com/zepto/0.8/zepto.min.js"></script> <script src="static/zepto.scroll.js"></script> <script type="text/javascript"> $('#top').on('click', function(e) { $.scrollTo({ endY: 0, duration: 200, callback: function() { alert('at the top'); } }); }); </script> </body> </html>

      

  • 相关阅读:
    基础实验7-2.2 插入排序还是堆排序 (25分)
    进阶实验6-3.1 红色警报 (25分)--并查集
    基础实验3-2.2 单链表分段逆转 (25分)--单链表
    基础实验6-2.2 汉密尔顿回路 (25分)--邻接矩阵
    案例6-1.3 哥尼斯堡的“七桥问题” (25分)--dfs图连通+度判断
    基础实验8-1.1 单身狗 (25分)
    基础实验7-2.3 德才论 (25分)--排序
    基础实验7-2.4 PAT排名汇总 (25分)--结构体排序(快排)
    进阶实验4-3.4 笛卡尔树 (25分)--二叉排序树+堆排序
    基础实验4-2.7 修理牧场 (25分)-堆+哈夫曼树
  • 原文地址:https://www.cnblogs.com/kevinCoder/p/4645003.html
Copyright © 2011-2022 走看看