如果你想改善你的网络应用程序的用户体验，特别是如果你想在元素即将滚动到视图中时触发一些操作，那么这篇文章就是为你准备的。

scroll_element_detector.js是一个非常小的jQuery插件，它可以检测元素是否滚动到视图中，并在匹配的元素可见时触发特定的操作（如运行CSS3动画或显示模式窗口）。

如何使用它:

1.下载包并在jQuery之后加载主脚本scroll_element_detector.js。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/scroll_element_detector.js"></script>

2.将数据滚动添加到要检测其可见性的目标元素。

<section data-scroll>
  Page Section 1
</section>
<section data-scroll>
  Page Section 2
</section>
<section data-scroll>
  Page Section 3
</section>
...

3.当元素滚动到视图中时，更改元素的样式。

[data-in-view] {
  background-color: #222;
}

4.当一个函数滚动到视图中时触发它。

<section data-scroll="myFunction(para)">
  Page Section 1
</section>

function myFunction(para) {
  // do something
}

5.定义元素的顶部偏移。

<section data-scroll="myFunction('para')" data-scroll-offset="500">
  Page Section 1
</section>

预览截图

检测屏幕上是否出现元素 scroll_Element_detector.js