博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
修改版的echojs支持iScroll
阅读量:6516 次
发布时间:2019-06-24

本文共 4288 字,大约阅读时间需要 14 分钟。

echojs监听窗体的scroll事件,使用iScroll,不会触发window的scroll事件。

给echojs初始化时传入实例化后的iScroll对象,echojs添加iScroll对象的scrollEnd事件监听事件。

/*! echo-js v1.7.3 | (c) 2016 @toddmotto | https://github.com/toddmotto/echo */(function (root, factory) {  if (typeof define === 'function' && define.amd) {    define(function () {      return factory(root);    });  } else if (typeof exports === 'object') {    module.exports = factory;  } else {    root.echo = factory(root);  }})(window, function (root) {  'use strict';  var echo = {};  var callback = function () {  };  var offset, poll, delay, useDebounce, unload;  var isHidden = function (element) {    return (element.offsetParent === null);  };  var inView = function (element, view) {    if (isHidden(element)) {      return false;    }    var box = element.getBoundingClientRect();    return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);  };  var debounceOrThrottle = function () {    if (!useDebounce && !!poll) {      return;    }    clearTimeout(poll);    poll = setTimeout(function () {      echo.render();      poll = null;    }, delay);  };  echo.init = function (opts) {    opts = opts || {};    var offsetAll = opts.offset || 0;    var offsetVertical = opts.offsetVertical || offsetAll;    var offsetHorizontal = opts.offsetHorizontal || offsetAll;    var optionToInt = function (opt, fallback) {      return parseInt(opt || fallback, 10);    };    offset = {      t: optionToInt(opts.offsetTop, offsetVertical),      b: optionToInt(opts.offsetBottom, offsetVertical),      l: optionToInt(opts.offsetLeft, offsetHorizontal),      r: optionToInt(opts.offsetRight, offsetHorizontal)    };    delay = optionToInt(opts.throttle, 250);    useDebounce = opts.debounce !== false;    unload = !!opts.unload;    callback = opts.callback || callback;    echo.render();    if (opts.iScroll) {      opts.iScroll.on('scrollEnd',debounceOrThrottle);      root.addEventListener('load', debounceOrThrottle, false);    } else if (document.addEventListener) {      root.addEventListener('scroll', debounceOrThrottle, false);      root.addEventListener('load', debounceOrThrottle, false);    } else {      root.attachEvent('onscroll', debounceOrThrottle);      root.attachEvent('onload', debounceOrThrottle);    }  };  echo.render = function (context) {    var nodes = (context || document).querySelectorAll('[data-echo], [data-echo-background]');    var length = nodes.length;    var src, elem;    var view = {      l: 0 - offset.l,      t: 0 - offset.t,      b: (root.innerHeight || document.documentElement.clientHeight) + offset.b,      r: (root.innerWidth || document.documentElement.clientWidth) + offset.r    };    for (var i = 0; i < length; i++) {      elem = nodes[i];      if (inView(elem, view)) {        if (unload) {          elem.setAttribute('data-echo-placeholder', elem.src);        }        if (elem.getAttribute('data-echo-background') !== null) {          elem.style.backgroundImage = 'url(' + elem.getAttribute('data-echo-background') + ')';        }        else if (elem.src !== (src = elem.getAttribute('data-echo'))) {          elem.src = src;        }        if (!unload) {          elem.removeAttribute('data-echo');          elem.removeAttribute('data-echo-background');        }        callback(elem, 'load');      }      else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) {        if (elem.getAttribute('data-echo-background') !== null) {          elem.style.backgroundImage = 'url(' + src + ')';        }        else {          elem.src = src;        }        elem.removeAttribute('data-echo-placeholder');        callback(elem, 'unload');      }    }    if (!length) {      echo.detach();    }  };  echo.detach = function () {    if (document.removeEventListener) {      root.removeEventListener('scroll', debounceOrThrottle);    } else {      root.detachEvent('onscroll', debounceOrThrottle);    }    clearTimeout(poll);  };  return echo;});

调用

var myBScroll = new BScroll('.history_wrapper', {probeType: 2});      echo.init({      // offset: 100,      // throttle: 250,      // unload: false,      iScroll: myBScroll,      callback: function (element, op) {        console.log(element, 'has been', op + 'ed')      }    });

 

转载于:https://www.cnblogs.com/Koming/p/10001367.html

你可能感兴趣的文章
rsync 与 inotify 实现双机实时同步
查看>>
位运算技巧
查看>>
pl/sql 提醒乱码问题
查看>>
windows10和ubuntu16.04双系统下时间不对的问题
查看>>
VTP中VLAN配置信息不同步故障排除
查看>>
mongo主库地址变更,从库修改数据源IP
查看>>
LVM卷管理及配额设置
查看>>
怎样检查Linux服务器是否被***
查看>>
七周一次课(5月4日)
查看>>
linux下开源监控软件
查看>>
time函数
查看>>
我的友情链接
查看>>
mysql高可用mha
查看>>
php生成随机密码的几种方法
查看>>
记几处原生JS的开发
查看>>
Linux之父Linus说:并行计算基本上就是浪费大家的时间
查看>>
linux 虚拟机 kvm
查看>>
域名缓存侦测(DNS Cache Snooping)技术
查看>>
您真的会玩KMS吗_01.理论篇
查看>>
mysql生产环境安全规范
查看>>