js交集监测插件scrollama.js

所属分类:UI-滚动

 25368  326  查看评论 (4)
分享到微信朋友圈
X
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)

相关插件-滚动

javript自定义滚动条

用原生的javript写的自定义滚动条具有拖拽,滚轮事件和键盘事件
  滚动
 32238  356

jQuery锚点带动跳转页面代码

jQuery锚点带动跳转页面代码
  滚动
 42774  369

jQuery滚动收缩导航

jQuery滚动收缩导航
  滚动
 36639  373

jquery无缝滚动

真正的无缝滚动
  滚动
 74802  525

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

    像是青柠味° 0
    2020/8/28 14:34:01
    内嵌到app里不起作用吗 回复
    豌豆 0
    2019/5/10 10:35:44
    iexn 0
    2017/11/23 9:09:31

    有明显的bug,没测出来吗

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

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

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复