js交集监测插件scrollama.js

所属分类:UI-滚动

 2106  13  查看评论 (2)
js交集监测插件scrollama.js ie兼容9

如何使用

基本

您可以使用此库来简单地触发步骤, 类似于点之类的内容。如果您需要对交互式控件进行更多的控制, 或者不希望遵循粘性的 scrollytelling 模式, 这将非常有用。

您可以使用所需的任何 id/类命名约定。HTML 结构应该如下:

<!--you don't need the "data-step" attr, but can be useful for storing instructions for JS -->
<div class='step' data-step='a'></div>
<div class='step' data-step='b'></div>
<div class='step' data-step='c'></div>
// 实例化 scrollama
const scroller = Scrollama()

// 设置实例, 传递回调函数
scroller.setup({
  step: '.step', // 必填
  offset: 0.5,   // 偏移optional, default = 0.5
  debug: false,  // 调试optional, default = false
})
.onStepEnter(handleStepEnter)
.onStepExit(handleStepExit)

粘性图形

要实现粘滞图形 scrollytelling 模式, 您需要以下三元素 (container, graphic, step)。结构应该如下:

<!-- container = ".scroll" -->
<div class='scroll'>
  <!-- graphic = ".scroll__graphic" -->
  <div class='scroll__graphic'>
    <!--graphic / chart code here-->
  </div>
  <div class='scroll__text'>
    <!-- steps = ".step" -->
    <div class='step' data-step='a'></div>
    <div class='step' data-step='b'></div>
    <div class='step' data-step='c'></div>
  </div>
</div>
// 实例化scrollama
const scroller = Scrollama()
// 设置实例,传递回调函数
scroller.setup({
  step: '.scroll__text .step', // required
  container: '.scroll',        // required (for sticky)
  graphic: '.scroll__graphic', // required (for sticky)
  offset: 0.5,                 // optional, default = 0.5
  debug: false,                // optional, default = false
})
.onStepEnter(handleStepEnter)
.onStepExit(handleStepExit)
.onContainerEnter(handleContainerEnter)
.onContainerExit(handleContainerExit)

API

scrollama.setup([options])

  • step (string):将触发更改的步骤元素的选择器。必填

  • container (string): 包含滚动的所有内容的元素的选择器。选

  • graphic (string): 将变为固定的图形元素的选择器。选

  • offset (number, 0 - 1): 从视窗的顶部到触发步骤有多远。(默认值: 0.5)

  • progress (boolean): 是否触发增量步骤进度更新。(默认值: false)

  • debug (boolean): 是否显示可视化调试工具。(默认值: false)

相关插件-滚动

固定层的js代码

不随滚动条滚动的固定层广告代码
  滚动
 6701  36

jQuery单页滚动插件pagePiling.js

pagepiling.js是一个可以创建类似窗帘滚动网站的jQuery插件。它是灵活的,旧的浏览器和触摸设备兼容。您可以在原来的滚动的网站的基础上使用这个插件创建一个。
  滚动
 36384  156

新闻向下翻滚更新

新闻向下翻滚更新
  滚动
 9756  123

jQuery全屏滚动插件Scrollify

和 fullPage.js 一样,Scrollify 也是一款基于 jQuery 的全屏滚动插件。跟 fullPage.js 相比,Scrollify 更加小巧,压缩后不足 4KB。但功能上不如 fullPage.js 强大,对移动设备的支持也不如 fullPage.js。不过对于一般的情况,Scrollify 是完全可以胜任的,它支持自定义锚链接、设置过度效果、偏移、是否显示滚动条、回调函数以及 fullPage.js 没有的局部滚动。
  滚动
 3095  30

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

    iexn 0
    2017/11/23 9:09:31

    有明显的bug,没测出来吗

        西瓜0
        2017/11/23 23:15:33

        嵌套在ifrome中有向上不触发的bug, 实际应用没有的,你可以下载到本地查看都是正常的。

    回复
取消回复