可见性 | 语义 UI - Semantic UI 组件库

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

将事件附加到可见性有多种用途。以下是一些更常见的用途。

当用户部分完成滚动浏览内容时，您想开始将更多内容加载到容器中。

您想在图片即将对用户可见时开始加载它。

您希望元素根据用户滚动的距离进行改变。

您希望元素在经过时固定到视窗，并在之后返回到原始静态位置。

您想附加与用户与内容的互动相匹配的分析事件，例如，当博客文章被阅读 30% 时记录到 Google Analytics。

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

每次滚动更改都会触发一个动画帧请求，该请求将为元素触发回调函数。

以下示例使用粘性列来帮助在每个示例旁边显示数据。请参阅粘性文档以了解使用示例。

// 一些示例回调 $('.demo.segment') .visibility({ onTopVisible: function(calculations) { // 顶部在屏幕上 }, onTopPassed: function(calculations) { // 元素顶部已通过 }, onUpdate: function(calculations) { // 只要计算调整就执行某些操作 updateTable(calculations); } }) ;

计算	值
pixelsPassed	0px
percentagePassed	0%
fits	false
width	1264px
height	280px
onScreen
offScreen
passing
topVisible	false
bottomVisible	false
topPassed	false
bottomPassed	false

可见性的默认设置只会让每个回调函数在满足条件的第一次时发生。在随后的情况下，事件不会触发。

设置 continuous: true 将使回调函数在满足回调条件的任何时候触发。例如，如果您设置了一个“顶部可见”回调函数，则此回调函数将在每次滚动更改时触发，只要顶部在页面上可见。

设置 once: false 将使回调函数在每次回调变为真时触发。因此，使用相同的“顶部可见”示例，只要元素的顶部通过，回调函数就会触发。即使您向上滚动并再次通过元素也是如此。

清除

一次

持续

事件日志

回调函数分为两类。标准事件将在条件计算为真的第一个动画帧中发生。

事件	发生	伪代码
onOnScreen	元素的任何部分都在当前滚动视窗中	`screen.bottom >= element.top && screen.bottom <= element.bottom`
onOffScreen	元素的任何部分都不在当前滚动视窗中	`screen.bottom <= element.top \|\| screen.top >= element.bottom`
onTopVisible	元素的顶边已超过屏幕底部	`screen.bottom >= element.top`
onTopPassed	元素的顶边已超过屏幕顶部	`screen.top >= element.top`
onBottomVisible	元素的底边已超过屏幕底部	`screen.bottom >= element.top`
onPassing	元素的任何部分都在屏幕上可见	`screen.bottom >= element.top && screen.top < element.bottom`
onBottomPassed	元素的底边已超过屏幕顶部	`screen.top >= element.bottom`

onPassed 允许您指定一组回调函数，这些回调函数在元素通过不同百分比或像素后发生。

事件	发生	示例
onPassed {}	已通过元素内容顶部的距离，以百分比或像素表示。	`onPassed: { 40: function() { // 通过 40 像素时执行某些操作。 }, '80%': function() { // 在 80% 时执行某些操作 } }`

反向事件将在相同条件下发生，但当用户向上滚动页面时发生。

事件	发生	伪代码
onTopVisibleReverse	元素的顶边未超过屏幕底部	`screen.bottom >= element.top`
onTopPassedReverse	元素的顶边未超过屏幕顶部	`screen.top >= element.top`
onBottomVisibleReverse	元素的底边未超过屏幕底部	`screen.bottom >= element.top`
onPassingReverse	元素的顶部未超过屏幕顶部，但底部已超过	`screen.bottom >= element.top && screen.top < element.bottom`
onBottomPassedReverse	元素的底边未超过屏幕顶部	`screen.top >= element.bottom`

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

行为	使用
禁用回调函数	暂时禁用回调函数。如果您需要调整滚动位置，并且不想在位置更改期间触发回调函数，这很有用。
启用回调函数	重新启用回调函数
是否在屏幕上	返回元素是否在屏幕上
是否不在屏幕上	返回元素是否不在屏幕上
获取已通过的像素	返回从元素顶部开始，当前元素已通过的像素数。
获取元素计算	将元素计算作为对象返回。
获取屏幕计算	将屏幕计算作为对象返回。
获取屏幕大小	将屏幕大小作为对象返回。

作为分页的替代方法，您可以使用 onBottomVisible 在容器底部到达时自动加载内容。

$('.infinite.example .demo.segment') .visibility({ once: false, // 加载新内容时更新大小 observeChanges: true, // 在底部边缘可见时加载内容 onBottomVisible: function() { // 最多加载 5 次 window.loadFakeContent(); } }) ;

正在添加更多内容...

可见性包含一些用于设置常见可见性事件的快捷方式。使用设置 type: 'image' 将自动将事件附加到图片的 topVisible，以将 data-src 的内容作为 src 加载。

您可以将占位符图片指定为当前 src，以确保图片加载时内容不会跳动，或者您可以不指定占位符，让图片出现。

默认情况下，图片将没有任何动画出现，但是您也可以指定命名的过渡和用于对图片进行动画到视图的持续时间。

$('.demo.items .image img') .visibility({ type : 'image', transition : 'fade in', duration : 1000 }) ;

添加好友

查看

添加好友

查看

添加好友

查看

添加好友

查看

添加好友

查看

添加好友

查看

添加好友

查看

添加好友

查看

添加好友

查看

添加好友

查看

Example

<div class="ui divided demo items">
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/elliot.jpg">
    </div>
    <div class="content">
      <h2 class="ui header">Elliot Fu</h2>
      <p></p>
      <div class="ui primary button">添加好友</div>
      <div class="ui right floated button">查看 <i class="right chevron icon"></i></div>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/helen.jpg">
    </div>
    <div class="content">
      <h2 class="ui header">Helen Troy</h2>
      <p></p>
      <div class="ui primary button">添加好友</div>
      <div class="ui right floated button">查看 <i class="right chevron icon"></i></div>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/jenny.jpg">
    </div>
    <div class="content">
      <h2 class="ui header">Jenny Hess</h2>
      <p></p>
      <div class="ui primary button">添加好友</div>
      <div class="ui right floated button">查看 <i class="right chevron icon"></i></div>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/veronika.jpg">
    </div>
    <div class="content">
      <h2 class="ui header">Veronika Ossi</h2>
      <p></p>
      <div class="ui primary button">添加好友</div>
      <div class="ui right floated button">查看 <i class="right chevron icon"></i></div>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/stevie.jpg">
    </div>
    <div class="content">
      <h2 class="ui header">Stevie</h2>
      <p></p>
      <div class="ui primary button">添加好友</div>
      <div class="ui right floated button">查看 <i class="right chevron icon"></i></div>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/steve.jpg">
    </div>
    <div class="content">
      <h2 class="ui header">Steve Jobes</h2>
      <p></p>
      <div class="ui primary button">添加好友</div>
      <div class="ui right floated button">查看 <i class="right chevron icon"></i></div>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/ade.jpg">
    </div>
    <div class="content">
      <h2 class="ui header">Ade</h2>
      <p></p>
      <div class="ui primary button">添加好友</div>
      <div class="ui right floated button">查看 <i class="right chevron icon"></i></div>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/chris.jpg">
    </div>
    <div class="content">
      <h2 class="ui header">Chris</h2>
      <p></p>
      <div class="ui primary button">添加好友</div>
      <div class="ui right floated button">查看 <i class="right chevron icon"></i></div>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/joe.jpg">
    </div>
    <div class="content">
      <h2 class="ui header">Joe Henderson</h2>
      <p></p>
      <div class="ui primary button">添加好友</div>
      <div class="ui right floated button">查看 <i class="right chevron icon"></i></div>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/square-image.png" data-src="/images/avatar/large/laura.jpg">
    </div>
    <div class="content">
      <h2 class="ui header">Laura</h2>
      <p></p>
      <div class="ui primary button">添加好友</div>
      <div class="ui right floated button">查看 <i class="right chevron icon"></i></div>
    </div>
  </div>
</div>

每个回调函数都会将所有计算的值作为其第一个参数，允许您使用它来调整元素。

$('.changing.example .demo.segment') .visibility({ once : false, continuous : true, onPassing : function(calculations) { var newColor = 'rgba(0, 0, 0, ' + calculations.percentagePassed +')'; $(this) .css('background-color', newColor) ; } }) ;

Visibility 提供了一种轻量级的方法，用于将内容固定到页面的视窗。使用 type: fixed 将在元素通过视窗后添加 fixed 类。使用这个类名，您可以在元素通过后为其分配特殊的布局条件。

使用特殊的 visibility 类型 fixed 会自动创建一个占位符元素，该元素将在元素通过后显示或隐藏，以确保页面位置在元素“固定”并从正常的布局流程中移除时不会改变。

在这个示例中，当元素通过时，我们将它固定到视窗，添加背景颜色和框阴影，以便它可以浮动在其他内容之上。我们还显示了一个相邻的占位符元素，它确保内容保持与菜单仍在内容流中时相同的偏移。

您可能需要调整固定内容的 z-index，以确保它出现在其他页面内容之上。

$('.overlay.example .overlay') .visibility({ type : 'fixed', offset : 15 // 给屏幕顶部留出一些空间 }) ;

.visibility.example .overlay { background-color: #FFFFFF; padding: 0em; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); transition: all 0.5s ease; background: transparent; } /* 更改样式 */ .visibility.example .fixed.overlay { position: fixed; padding: 1em; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }

设置	默认值	描述
once	true	当设置为 false 时，回调函数会在元素每次通过条件的阈值时发生。
continuous	false	当设置为 true 时，回调函数会在元素每次通过条件时发生，而不仅仅是在满足阈值后立即发生。
type	false	设置为 `image` 以在屏幕上加载图像。设置为 `fixed` 以在元素通过时添加 `fixed` 类名。
initialCheck	true	是否应在初始化时立即检查 visibility 条件。
context	window	visibility 应该使用的滚动上下文。
refreshOnLoad	true	是否应在窗口 `load` 时检查 visibility 条件。这确保在图像加载后，内容位置将被正确更新。
refreshOnResize	true	是否应在窗口 `resize` 时检查 visibility 条件。当内容大小调整导致位置发生持续变化时很有用。
checkOnRefresh	true	是否应在调用 `refresh` 时检查 visibility 条件。这些调用可以从 `resize`、`load` 或手动调用 `$('.foo').visibility('refresh')` 中触发。
zIndex	1	使用 `type: 'fixed'` 时指定 z-index。 2.2 中的新功能
offset	0	上下文 `scrollTop` 应该以像素调整的值。有助于使内容出现在固定到页面的内容下方。
includeMargin	false	元素计算是否应包含其边距。
throttle	false	当设置为整数时，滚动位置将使用此 ms 值进行去抖动。`false` 将使用 `requestAnimationFrame` 进行去抖动。
observeChanges	true	是否在元素的 DOM 子树发生变化时自动刷新内容。
transition	false	当使用 `type: image` 时，允许您指定显示已加载图像时的过渡。
duration	1000	当使用 `type: image` 时，允许您指定过渡持续时间。

在命名 visibility 事件上发生的回调函数

	上下文	描述
onTopVisible	$element	元素的顶边已超过屏幕底部
onTopPassed	$element	元素的顶边已超过屏幕顶部
onBottomVisible	$element	元素的底边已超过屏幕底部
onPassing	$element	元素的任何部分都在屏幕上可见
onBottomPassed	$element	元素的底边已超过屏幕顶部
onTopVisibleReverse	$element	元素的顶边未超过屏幕底部
onTopPassedReverse	$element	元素的顶边未超过屏幕顶部
onBottomVisibleReverse	$element	元素的底边未超过屏幕底部
onPassingReverse	$element	元素的顶部未超过屏幕顶部，但底部已超过
onBottomPassedReverse	$element	元素的底边未超过屏幕顶部

仅在使用 type: 'fixed' 时发生的回调函数

	上下文	描述
onLoad	img	在图像完成加载后发生。
onAllLoaded	最后加载的 img	在所有在同一时间初始化的 `img` 加载完毕后发生。

仅在使用 type: 'fixed' 时发生的回调函数

	上下文	描述
onFixed	$element	在元素被分配 position fixed 后发生。
onUnfixed	$element	在元素从固定位置移除后发生。

在命名 visibility 事件上发生的回调函数

	上下文	描述
onUpdate(calculations)	$element	每次元素的计算更新时都会发生。
onRefresh	$element	只要元素的 visibility 被刷新就会发生。

设置	默认值	描述
namespace	visibility	事件命名空间。确保模块拆卸不会影响附加到元素的其他事件。
className	className : { fixed : 'fixed', }	用于将样式附加到状态的类名。

设置	默认值	描述
name	可见性	调试日志中使用的名称。
silent	False	静默所有控制台输出，包括错误消息，无论其他调试设置如何。
debug	False	向控制台提供标准调试输出。
performance	True	向控制台提供标准调试输出。
verbose	True	向控制台提供辅助调试输出。
errors	error : { method : 'The method you called is not defined.', }

可见性
可见性提供了一组回调函数，用于在内容出现在视窗中时触发。

介绍

使用

使用方法

更改回调频率

回调

标准事件

分组事件

反向事件

行为

示例

无限滚动

无限滚动示例

延迟加载图片

Elliot Fu

Helen Troy

Jenny Hess

Veronika Ossi

Stevie

Steve Jobes

Ade

Chris

Joe Henderson

Laura

渐进变化

将内容固定到视窗

设置

功能
配置 visibility 行为的设置

Visibility 回调函数

图像回调函数
2.2 中的新功能

固定回调函数
2.2 中的新功能

实用程序回调函数

DOM 设置
DOM 设置指定此模块应如何与 DOM 交互。

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

社区

网络

帮助维护此项目

调光器消息
调光器副标题

介绍

使用

使用方法

更改回调频率

回调

标准事件

分组事件

反向事件

行为

示例

无限滚动

无限滚动示例

延迟加载图片

Elliot Fu

Helen Troy

Jenny Hess

Veronika Ossi

Stevie

Steve Jobes

Ade

Chris

Joe Henderson

Laura

渐进变化

将内容固定到视窗

设置

功能配置 visibility 行为的设置

Visibility 回调函数

图像回调函数2.2 中的新功能

固定回调函数2.2 中的新功能

实用程序回调函数

DOM 设置DOM 设置指定此模块应如何与 DOM 交互。

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

社区

网络

帮助维护此项目

调光器消息调光器副标题

功能
配置 visibility 行为的设置

图像回调函数
2.2 中的新功能

固定回调函数
2.2 中的新功能

DOM 设置
DOM 设置指定此模块应如何与 DOM 交互。

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

调光器消息
调光器副标题