在前端开发中，经常会遇到需要滚动到某个元素的需求。而 angular-element-scroll 这个 npm 包就提供了一个简便的方式去实现这个功能。本篇文章将介绍这个 npm 包的详细使用方法。
安装
要使用 angular-element-scroll，需要先在项目中安装它。可以通过以下命令来进行安装：
npm install angular-element-scroll --save
这将会在你的项目中安装 angular-element-scroll 的最新版本。
使用
在项目中使用 angular-element-scroll 很简单。首先，要在需要滚动到的元素上使用一个指令，将它标记为一个可滚动的元素。例如，如果要滚动到一个具有 scroll-container 类的元素上，可以这样写：
<div class="scroll-container" ngxElementScroll></div>
接下来，在你的组件中，你需要订阅 NgxElementScrollService，这个服务会告诉你在哪里滚动。例如：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------------------- - ---- -------------------------
------------
--------- ---------------
--------- -
---- ------------------------ -----------------------
------- --------------------------- -- ------------------
-
--
------ ----- ----------- ---------- ------ -
------------------- ------------------------ ------------------------ - -
---------- -
----------------------------------------------------------------------- -- -
-------------------------
---
-
---------- -
------------------------------------------------------------------
-
-在这个例子中，我们在 NgxElementScrollService 上订阅了 scrollStateChanged 事件，这个事件是指该滚动的状态已经改变了。在 scrollTo 方法中，我们使用 NgxElementScrollService 来滚动到被标记为可滚动的元素。
参数
angular-element-scroll 提供了一些参数，可以帮助你更好地定制滚动行为。这些参数可以通过将它们添加到 ngxElementScroll 指令中来覆盖默认值。
以下是可以使用的参数：
scrollContainerSelector
这个参数可以用于指示滚动容器的选择器。默认情况下，滚动容器被定义为它身上 ngxElementScroll 指令直接父元素。这个参数可以让你指定一个不同的元素作为滚动容器。
<div class="scroll-container" ngxElementScroll [scrollContainerSelector]="'#my-scroll-container'"></div> <div id="my-scroll-container"></div>
internalScroll
这个参数可以用于指示是否允许内部滚动（即元素自己可以滚动）。默认情况下，内部滚动被禁用，而只有父元素可以滚动。如果启用了此选项，元素将有能力自行实现滚动。
<div class="scroll-container" ngxElementScroll [internalScroll]="true"></div>
scrollAnimationTime
这个参数可以用于指示动画时间，以毫秒为单位。默认情况下，滚动将以 500 毫秒的动画时间进行。你可以将它设置为 0 以禁用动画。
<div class="scroll-container" ngxElementScroll [scrollAnimationTime]="200"></div>
scrollPadding
这个参数可以用于添加滚动到指定元素时的额外间距。默认情况下，滚动到元素上沿（top edge）。
<div class="scroll-container" ngxElementScroll [scrollPadding]="20"></div>
结论
angular-element-scroll 可以让前端开发者更加轻松地实现滚动元素的需求。它提供了一些参数，可以用于定制滚动行为。在你的下一个项目中，不妨试着使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556c481e8991b448d3964