伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:UI-滚动
 3546  16  查看评论 (2)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 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)
相关伟德BETVICTOR-滚动

jQuery美化滚动条伟德BETVICTORmCustomScrollbar

mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条伟德BETVICTOR,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义
  滚动
 5097  38

JQuery滚动条伟德BETVICTORjscroll.js

JQuery滚动条伟德BETVICTORjscroll.js,支持火狐谷歌IE等主流浏览器,超轻量兼容好
  滚动
 4743  22

仿淘宝、京东等电商网站楼层跳转滚动定位

实现电商网站的滚动监听、导航定位、返回顶部的功能
  滚动
 961  21

jQuery仿京东楼层滑动侧边栏高亮(原创)

jQuery模仿京东侧边栏点击滑动到该楼层,同时侧边栏随着页面滚动对应导航高亮。
  滚动
 6267  50

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

    iexn 0
    2017/11/23 9:09:31
    有明显的bug,没测出来吗
        西瓜0
        2017/11/23 23:15:33
        嵌套在ifrome中有向上不触发的bug, 实际应用没有的,你可以下载到本地查看都是正常的。
    回复
取消回复