轻量级页面元素滚动监听js插件(原创)

所属分类:UI-滚动

 22236  314  查看评论 (2)
分享到微信朋友圈
X
轻量级页面元素滚动监听js插件(原创) ie兼容8

Roll

一个轻量级的页面元素滚动监听js插件,当元素出现在视口时可以执行指定的操作!Roll支持IE8+浏览器。(注:该插件借用了echo.js代码)

注意:一个页面最多只能new一个实例,因为在Roll初始化时给浏览器绑定了scroll、resize、laod事件,如果new 多个实例,则会给浏览器绑定多次相同事件

Roll用法

<body>
    <p class="p1" data-asyncload><img src="images/2.jpg" alt="" /></p>
    <br /><br />....
    <p class="p2" data-asyncload><img src="images/3.jpg" alt="" /></p>
    <br /><br />....
    <p class="p3" data-asyncload><img src="images/4.jpg" alt="" /></p>
    <br /><br />....
    <p class="p4" data-asyncload><img src="images/img1.jpg" alt="" /></p>
    <br /><br />....
    <script>
        var roll = new Roll({
          offsetTop: 100
        });
        console.log(roll);
        roll.push(document.querySelector(".p1"), function (context, done){
            console.log('图片1出现在视口,可以执行操作了!');
            done(this, context);
        });
        roll.push(document.querySelector(".p2"), function (context, done){
          console.log('图片2出现在视口,可以执行操作了!');
          done(this, context);
          //roll.destroy();
        });
        roll.push(document.querySelector(".p3"), function (context, done){
          console.log('图片3出现在视口,可以执行操作了!');
          done(this, context);
        });
        roll.push(document.querySelector(".p4"), function (context, done){
          console.log('图片4出现在视口,可以执行操作了!');
          done(this, context);
        });
    </script>
</body>

new Roll(options) options可用参数说明

callback

回调函数。当监听的元素出现在视口时会被执行,并且调用时会传递2个参数给使用者。该函数的this指向当前出现在视口的元素。

参数一: context
    context 为 Roll 对象实例
参数二: done
    done为一个函数,调用该方法即可停止监听当前元素

offsetTop

  • 设置元素顶部距离视口多少就开始执行回调函数,默认值为0

offsetLeft

  • 设置元素左侧距离视口多少就开始执行回调函数,默认值为0

offsetRight

  • 设置元素右侧距离视口多少就开始执行回调函数,默认值为0

offsetBottom

  • 设置元素底部距离视口多少就开始执行回调函数,默认值为0

Roll实例方法

push(ele, cb, option)

将元素添加进监听队列,Roll在初始化时给浏览器绑定了scroll、resize、laod事件,因此当触发这些事件时都会计算队列中的元素是否出现在视口内,如果出现在视口内则执行回调函数。

1. ele:dom元素[必填]

2. cb:回调函数[可选],如果传递了则先执行此回调,再执行全局的回调函数,该函数接收2个参数

  • context: Roll对象实例

  • done:一个函数,执行该函数则表示不需要再监听当前元素了。done函数用法:done(当前dom元素, context);

3. options:可选参数,这个参数里面的值会覆盖new Roll(options)中的options值

  • immediate 表示元素添加进队列后是否立即执行一遍,默认值为true

  • offsetTop 设置元素顶部距离视口多少就开始执行回调函数,默认值为0

  • offsetLeft设置元素左侧距离视口多少就开始执行回调函数,默认值为0

  • offsetRight设置元素右侧距离视口多少就开始执行回调函数,默认值为0

  • offsetBottom设置元素底部距离视口多少就开始执行回调函数,默认值为0

destroy

销毁当前Roll实例

相关插件-滚动

jQuery全屏滚动插件,带箭头点击

一款功能齐全的全屏滚动插件,符合绝大部分开发人员的需求,没有滚动循环,无需做过多更改就能满足您的要求。
  滚动
 18997  217

jQuery电商网站楼层滚动定位

jQuery电商网站楼层滚动定位
  滚动
 56171  628

自制高度可定制滚动条插件(原创)

自制原生JS高度可定制化的滚动条插件,高度自定义,轻量化,浏览器兼容良好
  滚动
 32342  423

js交集监测插件scrollama.js

Scrollama是一个轻量级JavaScript库, 用于检测页面滚动时监听元素是否重叠。
  滚动
 26036  326

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    @沉默是你不懂得幽默―― 0
    2020/4/13 14:58:32
    请问如何在vue中使用呢?
        xta fnhc tewq0
        2020/6/10 10:47:11
        导入进去,跟demo一样的使用
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复