介绍
随着前端技术的发展，越来越多的网站需要实现无限滚动加载等功能，这时候就需要用到 @polymer/iron-scroll-threshold 这个 npm 包了。
@polymer/iron-scroll-threshold 是一个 Polymer 元素，可以用于检测滚动事件，当滚动到指定位置时触发回调函数，可以实现无限滚动加载等功能，是开发 Web 应用程序时非常实用的一种技术。
安装
要使用 @polymer/iron-scroll-threshold 包，需要先安装 Node.js 和 npm。使用 npm 安装 @polymer/iron-scroll-threshold 包的命令如下：
npm install --save @polymer/iron-scroll-threshold
示例代码
下面是一个使用 @polymer/iron-scroll-threshold 包的示例代码：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
------------- --------- ------------
------- -----------------------------------------------------------------------------------
------- --------------
------ - ----------- ---- - ---- ------------------------------------------------
------ ----------------------------------------------------------
----- ------------------- ------- ---------- -
-------------- -
----------------- ---- ----------
-
-------- -
------ -----
-------
----- -
-------- ------
------ -----
------- ------
--------- -----
-
--------
---------------------- ----------------------------------------
----
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- -------
-----
------------------------
--
-
-
---------------------------------------------- ---------------------
---------
-------
------
-----------------------------------------------
-------
-------这个示例代码加载了一个包含 10 个 li 元素的 ul 列表，在 scroll-threshold-demo 元素内部使用了 iron-scroll-threshold 元素，并设置了 lower-threshold 事件的回调函数为 loadMoreData()，表示在滚动到页面底部时调用 loadMoreData() 函数进行数据加载。
使用说明
属性
@polymer/iron-scroll-threshold 元素的属性如下：
lowerThreshold：滚动到底部的阈值，默认值为 0，表示当滚动条滑到最底部时即触发 "lower-threshold" 事件。
upperThreshold：滚动到顶部的阈值，默认值为 0，表示当滚动条滑到最顶部时即触发 "upper-threshold" 事件。
scrollTarget：要监测滚动事件的 DOM 元素，默认为 iron-scroll-target 的父元素。
scrollHandler：用于监听滚动事件的方法，默认为 handleScroll()，可以自定义该方法来响应滚动事件。
事件
@polymer/iron-scroll-threshold 元素的事件如下：
lower-threshold：滚动条滑到页面底部时触发此事件。
upper-threshold：滚动条滑到页面顶部时触发此事件。
示例解释
在上面的示例代码中，我们首先在 head 标签中导入了 webcomponents-bundle.js 和 iron-scroll-threshold.js 两个脚本文件。然后，定义了一个名为 ScrollThresholdDemo 的类，继承自 LitElement 类，并实现了 loadMoreData() 和 render() 两个方法。
loadMoreData() 方法用于在滚动到页面底部时加载更多的数据，这里我们通过 console.log() 方法来模拟加载数据的过程。
render() 方法返回了包含 iron-scroll-threshold 元素和一个 ul 列表的模板字符串，同时将 lower-threshold 事件的回调函数设置为 loadMoreData() 方法。
最后，使用 customElements.define() 方法将 ScrollThresholdDemo 元素注册为一个 Web 组件，并在 body 标签中使用 scroll-threshold-demo 元素来显示页面内容。
总结
以上就是 @polymer/iron-scroll-threshold 包的使用教程，该包可以帮助开发者轻松实现无限滚动加载等功能，提高了 Web 应用程序的用户体验，对于 Web 开发人员来说是非常有用的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f7580cba9b7065299ccbccf