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

所属分类:UI-滚动
 2175  13  查看评论 (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-滚动

网站广播伟德BETVICTOR

网站发布消息的广播伟德BETVICTOR
  滚动
 17112  102

常用的根据高度自动切换效果

常用的根据高度自动切换效果 简单 下载下来之后可以直接是用 兼容性好 不存在兼容问题
  滚动
 8201  50

JQuery滚动条伟德BETVICTORjscroll.js

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

jQuery横向全屏切换滚动

jQuery横向全屏切换滚动兼容ie6
  滚动
 15592  125

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

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