@polymer/iron-scroll-target-behavior 是一个 Polymer 元素，它可以让你将滚动事件添加到任何元素上，同时提供帮助类来确定用户是否在滚动元素上或在滚动元素内部。在本文中，我们将深入研究这个包的使用方式，并提供详细的代码示例。
安装和导入 @polymer/iron-scroll-target-behavior
要在你的项目中使用 @polymer/iron-scroll-target-behavior ，你需要首先使用 npm 进行安装。在你的项目根目录中打开终端并运行以下命令：
npm install --save @polymer/iron-scroll-target-behavior
完成安装后，你可以在你的 js 文件中引入它：
import { IronScrollTargetBehavior } from '@polymer/iron-scroll-target-behavior';使用 IronScrollTargetBehavior
现在你已经成功导入了 IronScrollTargetBehavior，下面我们将详细介绍如何将它应用到你的元素中。
将行为添加到元素
通过使用 IronScrollTargetBehavior 可以为一个元素添加滚动事件行为。你可以像下面这样将行为添加到你的元素中：
class MyElement extends IronScrollTargetBehavior(Polymer.Element) {
// your code here
}
customElements.define('my-element', MyElement);这里的 MyElement 元素将拥有 IronScrollTargetBehavior 的所有方法和属性。
捕获滚动事件
添加了 IronScrollTargetBehavior 后，接下来你就需要编写代码来捕捉滚动事件。你可以使用以下方法来对滚动事件进行处理：
// 当元素被滚动时触发
_onIronScroll(e) {
console.log('Element scrolled', e.detail);
}在 MyElement 中，你可以定义 _onIronScroll 方法来处理滚动事件。获取到滚动事件详情可以使用 e.detail。该值是一个对象，包含以下属性：
scrollTarget: 产生滚动事件的元素。scrollTop: 滚动目标的顶部的位置。scrollLeft: 滚动目标的左部的位置。isTrusted: 布尔值，反映事件是否由用户造成。
你也可以从 _onIronScroll 中调用其他的方法或者初始化方法：
-- -------------------- ---- -------
----- --------- ------- ----------------------------------------- -
---------------- -
-- ---- - ------ --- -------- --- ------
------------------------------------------
-
--------------------------- -
-- --------- ---- --- ---------- ------
--------------------- - ---------------- - ---- ---- ------
-
-在这个例子中，我们根据滚动事件调用了 adjustBackground 方法，根据 scrollTop 调整了元素的背景颜色。
确定滚动位置
@polymer/iron-scroll-target-behavior 还提供了一组方法来帮助你确定是否滚动到了特定的位置：
isOnScreen(): 如果元素当前在屏幕上可见，返回 true。isAboveViewport(): 如果元素完全在视口的顶部之上，返回 true。isBelowViewport(): 如果元素在视口下方，返回 true。isOnViewport(): 如果元素的任意部分在视口中，则返回 true。
你可以在需要的时候使用这些方法。例如，你可以检查当元素滚动到屏幕顶部时触发某些行为：
-- -------------------- ---- -------
----- --------- ------- ----------------------------------------- -
---------------- -
-- ------------------- -
--------------- ----------
-
-- ------------------------ -
------------------ ------------
-
-- ------------------------ -
------------------ ------------
-
-- --------------------- -
--------------- ------------
-
-
-通过 CSS 选择器捕捉滚动事件
你还可以通过 CSS 选择器来捕捉特定元素的滚动事件：
-- -------------------- ---- -------
----- --------- ------- ----------------------------------------- -
------ --- ----------- -
------ ---------------------------
-
---------------- -
----- ----------- - --------------------
-- --------------------------------------- -
-- ------ ------ -- ------- ---- -- ---------------
- ---- -- -------------------------------- -
-- ------ ------ -- ------- ---- ----- --------
-
-
-实际应用示例
下面是一个简单的示例，展示了如何在使用 IronScrollTargetBehavior 和 Polymer 元素时使用滚动事件：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------------------------- ------------
------- --------------
------ -
---------------
----
- ---- ----------------------------------------------------------------------------------------
------ - ------------------------ - ---- -------------------------------------------------------------------------------------------------------------------
----- ------ ------- -------------- -
------ --- ---------- -
------ -----
-------
---------- -
------- -------
-
--------
---- -------------- --------------------------
---------- ------------
-------- ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------ ----- ------- -- ---- -- ----- ------- ---- ------- ------------ ------- ------- ---- -- ------- -- -- ------- --------------
------
--
-
------ --- ------------ -
------ -
---------- -
----- -------
------ -
-
--
-
------------- -
--------
-
---------------- -
----- --------- - -------------------
---------------------------------
-- ------------------- -
--------------- ----------
-
-- ------------------------ -
------------------ ------------
-
-- ------------------------ -
------------------ ------------
-
-- --------------------- -
--------------- ------------
-
-
--------------------------- -
--------------------- - ---------------- - ---- ---- ------
-
-
-------------------------------- --------
---------
-------
------
-------------------
-------
-------在这个示例中，我们定义了一个 MyData 元素，该元素使用了 IronScrollTargetBehavior。我们添加了一个 div 元素，并在这个元素上添加了 on-scroll 事件，在滚动时输出日志，并根据滚动位置更改背景颜色。
总结
@polymer/iron-scroll-target-behavior 可以为一个元素提供滚动事件行为。通过添加它的行为和调用它的方法，你可以捕捉元素的滚动事件，并对这些事件作出反应。我们在文章中提供了完整的安装指南和代码示例，希望对你的前端开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f7580cba9b7065299ccbccc