简介
angular-track-scroll 是一个可用于在 Angular 应用中跟踪滚动行为的 npm 包。该包可以帮助我们轻松地实现一些简单的滚动跟踪功能，例如跟踪用户滚动到了页面的哪一部分等等。
特性
- 监听元素的滚动事件，并且记录用户滚动的位置
- 在 DOM 元素上添加 CSS Class，标记当前滚动到的位置
- 可以通过调用指令中的方法，触发对应的滚动事件，并自动滚动到对应的位置
安装
使用 npm 进行安装：
npm install angular-track-scroll --save
使用
引入 TrackScrollModule，并在组件中使用 trackScroll 指令：
-- -------------------- ---- -------
------ - ----------------- - ---- -----------------------
-----------
-------- -
---------------------------
--
------------- -
------------
--
---------- --------------
--
------ ----- --------- - -<div class="container"
trackScroll
[allowScrollToLast]="true"
(trackScrollChange)="change($event)">
<div class="section" scrollTo="top">Section 1</div>
<div class="section" scrollTo="middle">Section 2</div>
<div class="section" scrollTo="bottom">Section 3</div>
</div>trackScroll指令用于启用滚动监听功能allowScrollToLast用于控制是否允许滚动到最底部，默认是 falsetrackScrollChange用于监听滚动事件的变化scrollTo用于标记需要滚动到的位置
通过调用 TrackScrollDirective 中的 scrollToSection 方法，可以实现滚动到对应位置：
-- -------------------- ---- -------
------ - ---------- ---------- ---------- - ---- ----------------
------ - -------------------- - ---- -----------------------
------------
--------- -----------
--------- -
---- -----------
---- --------------- ---------------------- -------
---- --------------- ------------------------- -------
---- --------------- ------------------------- -------
------
------- ------------------------------ -- ------------
------- --------------------------------- -- ---------------
------- --------------------------------- -- ---------------
-
--
------ ----- ------------ -
----------------------- ---------- -----------
-------------------------------- ------------ ---------------------
---------- -
------------------------------------------------------ ---- -- -
-------------------------
---
-
------------- -
-------------------------------------------------------------- -------
-
---------------- -
-------------------------------------------------------------- ----------
-
---------------- -
-------------------------------------------------------------- ----------
-
-总结
通过使用 angular-track-scroll，可以轻松地实现滚动跟踪和滚动定位等功能，这非常有助于构建更好的用户体验。
示例代码：Github
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553ff81e8991b448d1588