Menu

可见性
可见性提供了一组当内容出现在视口中时的回调

介绍

可见性提供了一组回调函数,可以附加到任何元素上,并在特定可见性事件发生时触发.

将事件附加到可见性有多种用途. 下面是一些比较常见的Example.

无限卷动
当用户完成部分内容的滚动时,您希望开始将更多内容加载到容器中
延迟加载图片
您希望在用户看到Image之前开始加载它
反应性内容
您希望元素根据用户滚动的距离而改变
粘性的头
您希望元素在传递时将自身固定在视口上, 然后回到原来的静止位置
事件跟踪
您需要附加分析事件,以匹配用户与内容的互动, 例如, 当一篇博客文章的阅读量达到30%时,登录到谷歌Analytics.

使用

如何使用

可见性提供了一组回调函数,可用于将事件附加到屏幕上元素的位置.

每次滚动变化都会触发一个动画帧请求,该请求将为一个元素触发回调.

下面的示例使用粘性列来帮助在每个示例旁边显示数据. 请查阅 粘性的文档 的用法示例.
//一些示例回调 $('.演示.段”) .可见性({ onTopVisible:函数(计算){ // 前显示onScreen }, onTopPassed:函数(计算){ //传递元素的顶部 }, onUpdate:函数(计算){ //当计算调整时做一些事情 update选项卡le(计算); } }) ;
计算 价值
pixelsPassed
percentagePassed
fits
width
height
onScreen
offScreen
passing
topVisible
bottomVisible
topPassed
bottomPassed

改变回调频率

可见性的默认设置只会发生每个回调 第一次 满足哪些条件. 在随后发生的事件中,该事件将不会触发.

设置 连续:真 会引起回调火吗 只要满足回调条件. 例如,如果你设置一个前 visible回调, 当页面顶部可见时,这个回调函数将触发滚动的每一个变化.

设置 :假 每次回调都会触发回调吗 成为真正的. So, 使用相同的“顶部可见”的Example, 回调函数将在每次传递元素顶部时触发. 即使你向上滚动并再次传递元素

清晰的
事件日志

              

回调

回调分为两类. 标准事件将在条件评估为真正的的第一个动画帧中发生.

标准事件

事件 发生 伪代码
onOnScreen 元素的任何部分都在当前滚动视口中
屏幕.底 >= element.前 && 屏幕.底 <= element.底
onOffScreen 元素的任何部分都不在当前滚动视窗中
屏幕.底 <= element.屏幕顶部| |.前 >= element.底
onTopVisible 元素的顶部边缘已经越过屏幕底部
屏幕.底 >= element.前
onTopPassed 元素的顶部边缘已经越过屏幕顶部
屏幕.前 >= element.前
onBottomVisible 元素的底部边缘已经越过屏幕底部
屏幕.底 >= element.前
onPassing 元素的任何部分都onScreen可见
屏幕.底 >= element.前 && 屏幕.前 < element.底
onBottomPassed 元素的底部边缘已经越过屏幕顶部
屏幕.前 >= element.底

分组活动

onPassed 允许您指定在传递元素的不同百分比或像素之后发生的回调集合

事件 发生 Example
onPassed {} 从元素内容顶部传递的距离,可以是百分比,也可以是像素
onPassed: { 40:函数(){ //当超过40像素时做一些事情. }, “80%”:函数(){ //做一些80%的事情 } }

相反的事件

当用户向上滚动页面时,在相同的条件下会发生反转事件.

事件 发生 伪代码
onTopVisibleReverse 元素的顶部边缘没有经过屏幕底部
屏幕.底 >= element.前
onTopPassedReverse 元素的顶部边缘没有超过屏幕顶部
屏幕.前 >= element.前
onBottomVisibleReverse 元素的底部边缘没有经过屏幕底部
屏幕.底 >= element.前
onPassingReverse 元素的顶部没有经过屏幕顶部,但底部已经经过了
屏幕.底 >= element.前 && 屏幕.前 < element.底
onBottomPassedReverse 元素的底部边缘没有超过屏幕顶部
屏幕.前 >= element.底

行为

可见性包括一些与组件交互的有用行为

行为 使用
禁用回调 暂时禁用回调. 如果你需要调整滚动的位置,并且不想在位置改变期间触发回调,这是很有用的.
实现回调函数 重新启用回调
是onScreen 返回元素是否onScreen
屏幕是关闭的 返回元素是否离开屏幕
passing像素 返回从元素顶部传入当前元素的像素数
获得元素的计算 将元素计算返回为对象
获取屏幕的计算 将屏幕计算返回为对象
获取屏幕大小 返回屏幕大小为对象

Example

无限卷动

您可以使用分页的替代方法 onBottomVisible 当到达容器底部时自动加载内容.

$('.无限.Example .演示.段”) .可见性({ :假的, //加载新内容时更新大小 observeChanges:没错, //加载内容在底部边缘可见 onBottomVisible:函数(){ //最大加载5次 窗口.负载FakeContent (); } }) ;

无限卷动的Example

添加更多内容...

延迟加载图片

可见性包括设置常见可见性事件的几个快捷方式. 使用的设置 类型:“Image” 将自动附加事件到Image topVisible 的内容 data-src as src.

可以将占位符映像指定为当前映像 src 确保图片载入时内容不会跳转, 或者您可以不指定占位符并显示Image.

默认情况下,Image不会显示动画,但是你也可以指定一个命名的 过渡,以及应该用于将Image动画到视图中的持续时间

$('.演示.项目 .Image编码器”) .可见性({ 类型 : ' 形象”, 过渡:'fade in', 持续时间:1000 }) ;

艾略特福

添加朋友
视图

特洛伊的海伦

添加朋友
视图

珍妮赫斯

添加朋友
视图

Veronika东德

添加朋友
视图

史蒂夫

添加朋友
视图

史蒂夫工作

添加朋友
视图

正面

添加朋友
视图

克里斯

添加朋友
视图

乔·亨德森

添加朋友
视图

劳拉

添加朋友
视图

渐进的改变

每个回调接收所有计算值作为其第一个参数, 允许您使用

$('.改变.Example .演示.段”) .可见性({ :假的, 连续:没错, onPassing:函数(计算){ var newColor = 'rgba(0, 0, 0, ' +计算.percentagePassed + ') '; (美元) .css (background, newColor) ; } }) ;

将内容固定到视口

可见性提供了一种轻量级的方法来将内容粘在页面的视口上. 使用 类型:固定 将添加类 固定 在一个元素被传递到视口中之后. 使用这个类名,您可以在传递项目后为其分配特殊的布局条件.

使用特殊的可见性类型 固定 会自动创建一个占位符元素吗, 传递元素后,哪个元素会显示或隐藏, 确保当元素“固定”并从正常布局流程中移除时,页面的位置不会改变.

在这个Example中, 当传递一个元素时,365app将其固定到视口, 添加背景颜色和方框阴影,以便它可以浮动在其他内容之上. 365app还显示了一个相邻的占位符元素,以确保内容保持偏移,就像菜单仍然在内容流中一样

你可能需要调整你的固定内容 z - index 以确保它出现在其他页面内容之上.
$('.overlay.Example .overlay”) .可见性({ 类型:“固定”, 偏移:15 //给屏幕顶部一些空间 }) ;
.可见性.Example .overlay{ background - color: # FFFFFF; 填充:0 em; Box-shadow: 0px 0px rgba(0,0,0,0); 过渡:0.5 s缓解; 背景:透明; } /*更改样式*/ .可见性.Example .固定.overlay{ 位置:固定; 填充:1 em; Box-shadow: 0px 0px 6px rgba(0,0,0,0.2); }

设置

功能
配置可见性行为的设置

设置 默认的 描述
一次 真正的 当设置为假时,每次一个元素出现回调 passing阈值 的一个条件.
连续 当设置为真正的时,回调将在任何元素发生 passing一个条件 而不仅仅是在达到门槛之后.
类型 设置为 Image onScreen加载Image. 设置为 固定 添加类名 固定 当passing.
initialCheck 真正的 是否应该在init上立即检查可见性条件
上下文 窗口 滚动上下文可见性应该使用.
刷新OnLoad 真正的 是否应检查窗户的能见度情况 负载. 这确保了在Image加载内容后,位置将被正确更新.
刷新OnResize 真正的 是否应检查窗户的能见度情况 调整. 当内容调整大小导致位置连续变化时,这很有用
checkOnRefresh 真正的 呼叫时,是否应检查能见度情况 刷新. 这些调用可以从任何一个触发 调整, 负载 或手动调用 $('.foo”).可见性(“更新”)
zIndex 1 使用时指定z索引 类型:“固定”.
新2.2
抵消 0 值上下文 scrollTop 应该调整像素. 有用的使内容出现在下面的内容固定到页面.
includeMargin 元素计算是否应包括其余量
节气门 当设置为整数时,滚动位置将使用这个ms值取消. 将防反跳 requestAnimationFrame.
observeChanges 真正的 当元素的DOM子树发生更改时,是否自动刷新内容
过渡 当使用 类型:Image 允许您在显示加载的Image时指定过渡
持续时间 1000 当使用 类型:Image 允许您指定转换持续时间

可见性回调

在命名的可见性事件上发生的回调

上下文 描述
onTopVisible 美元的元素 元素的顶部边缘已经越过屏幕底部
onTopPassed 美元的元素 元素的顶部边缘已经越过屏幕顶部
onBottomVisible 美元的元素 元素的底部边缘已经越过屏幕底部
onPassing 美元的元素 元素的任何部分都onScreen可见
onBottomPassed 美元的元素 元素的底部边缘已经越过屏幕顶部
onTopVisibleReverse 美元的元素 元素的顶部边缘没有经过屏幕底部
onTopPassedReverse 美元的元素 元素的顶部边缘没有超过屏幕顶部
onBottomVisibleReverse 美元的元素 元素的底部边缘没有经过屏幕底部
onPassingReverse 美元的元素 元素的顶部没有经过屏幕顶部,但底部已经经过了
onBottomPassedReverse 美元的元素 元素的底部边缘没有超过屏幕顶部

Image回调
新2.2

仅在使用时发生的回调 类型:“固定”

上下文 描述
onLoad img 在Image加载完成后发生
onAllLoaded 最后加载img 毕竟发生 img 初始化的同时已加载.

固定的回调
新2.2

仅在使用时发生的回调 类型:“固定”

上下文 描述
onFixed 美元的元素 在元件被指定位置固定后发生
onUn固定 美元的元素 元件从固定位置移除后发生

实用程序回调

在命名的可见性事件上发生的回调

上下文 描述
onUpdate(计算) 美元的元素 每次更新元素计算时发生
onRefresh 美元的元素 每当元素的可见性被刷新时发生

DOM的设置
DOM设置指定该模块应该如何与DOM接口

设置 默认的 描述
名称空间 可见性 事件名称空间. 确保模块拆卸不会影响附加到元素的其他事件.
类名称
名称:{ 固定:“固定”, }
用于将样式附加到状态的类名

调试设置
调试设置控制到控制台的调试输出

设置 默认的 描述
The名字 可见性 调试日志的名称
沉默 关闭所有控制台输出,包括错误消息,而不考虑其他调试设置.
调试 提供标准的调试输出到控制台
性能 真正的 提供标准的调试输出到控制台
详细的 真正的 提供辅助调试输出到控制台
错误
错误:{ 方法:'你调用的方法没有定义.', }

调光器的信息
调光器分联箱

友情链接: 1 2 3 4 5 6 7 8 9