zoukankan      html  css  js  c++  java
  • 关于zepto没有scrollTop事件

    在使用zepto库时,发现他没有scrollTop事件,在github上有个对zepto进行扩展,增加了scrollTop事件,地址是:https://github.com/suprMax/ZeptoScroll/tree/master/static

    /* 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));

    使用方法是:

    $('#ttp').on('click', function(e) {
      $.scrollTo({
        endY: 0,
        duration: 200,
        callback: function() {
          alert('at the top');
        }
      });
    });
  • 相关阅读:
    教练技术的小应用
    “货品未动,数据先行”,德邦快递与网易云联合打造“智能物流”
    小论数据分析的方法及思维
    网易蜂巢(云计算基础服务)MongoDB服务重磅来袭
    pdfjs viewer 开发小结
    wap html5播放器和直播开发小结
    MongoDB之我是怎么成为Primary节点的
    MongoDB中WiredTiger的数据可用性设置
    AutoMapper 自动映射工具
    linq 左连接实现两个集合的合并
  • 原文地址:https://www.cnblogs.com/zoumiaomiao/p/4933402.html
Copyright © 2011-2022 走看看