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');
        }
      });
    });
  • 相关阅读:
    Zabbix 添加内存告警
    Oracle Drop 表数据恢复
    Kubernetes port-forward
    Jenkins指定tag发布到k8s环境
    Jenkins系列之六——拉取指定branch或tag
    MySQL5.7 报错 ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing this statement
    docker部署常见应用
    Vim 中进行文件目录操作
    Oracle使用expdp/impdp迁移数据
    UmengAppDemo【友盟统计SDK集成以及多渠道打包配置,基于V7.5.3版本】
  • 原文地址:https://www.cnblogs.com/zoumiaomiao/p/4933402.html
Copyright © 2011-2022 走看看