在前端开发中，我们经常会用到滚动操作。而 @better-scroll/observe-dom 就是一个方便的 npm 包，它提供了一个监听滚动事件的功能，可以方便的使用在我们的 web 应用中。本文将带你使用此包，了解它的使用方法，及其常见的应用场景。
安装
首先我们需要使用 npm 安装 @better-scroll/observe-dom，在你的项目中执行以下命令：
npm install --save @better-scroll/observe-dom
使用
在使用 @better-scroll/observe-dom 的时候，需要先进行初始化。以下是一个基本的初始化示例：
-- -------------------- ---- ------- ------ ---------- ---- ---------------------------- ------ ------- ---- --------------- ----- ------- - ---------------------------------- ----- ------ - --- ---------------- - -- --- ------- ---- -- ----- ---------- - --- ------------------- - --------- ----- ----------- ---- --
代码中，我们使用 import 命令引入了 @better-scroll/observe-dom 和 better-scroll 两个 npm 包。然后通过 BScroll 创建了一个 better-scroll 的实例，其中的配置项请参考 BScroll 配置项。接下来创建了 ObserveDOM 实例，并将 wrapper 作为参数传入，observer 和 observeDOM 分别表示是否开启子元素监听和 DOM 监听。
你也可以通过以下方式来销毁监听：
observeDOM.destroy()
应用场景
@better-scroll/observe-dom 提供了一个监听滚动事件的功能，可以应用于多个场景，以下是一些常见的用法：
图片懒加载
当我们的 web 应用中的图片数量较多时，为了提升页面的加载速度和用户体验，我们可以使用图片懒加载的技术。通过 @better-scroll/observe-dom 包中的监听机制，我们可以判断图片是否在用户的视口中，如果不在，则可以将其设置为一个默认的图片，在用户滚动到其位置时再将其加载出来。
以下是一个图片懒加载的实现代码：
-- -------------------- ---- -------
------ ---------- ---- ----------------------------
------ ------- ---- ---------------
----- ------- - ----------------------------------
----- ------ - --- ---------------- -
-- --- ------- ----
--
----- ---------- - --- ------------------- -
--------- -----
----------- ----
--
------------------------------------ -- -- -
-- ----------- --- ----- -- -------- -
------ - ---------------------------
-
--以上代码中，我们通过监听 willScrollToElement 事件，在国企滚动到要加载的图片时，再加载出它。这样可以一定程度上减轻大量图片带给页面的压力。
动态加载列表
在某些时候，我们需要根据用户的操作动态地更新列表内容。通过监听 @better-scroll/observe-dom 的机制，我们可以在用户将要滚动到列表底部时，加载更多的数据。
以下是一个动态加载列表的实现代码：
-- -------------------- ---- -------
------ ---------- ---- ----------------------------
------ ------- ---- ---------------
----- ------- - ----------------------------------
----- ------ - --- ---------------- -
-- --- ------- ----
--
----- ---------- - --- ------------------- -
--------- -----
----------- ----
--
-- ----
--- ---- - -
-- ----
----- --------- - --
------------------------------------ -- -- -
-- --- --- ------------------------- ---------------- -
-- ------
---------------------
-
--
----- -------- ------------------- -
-- ------
----- ---- - ----- ----------------- ----------
-- ------
----------------
-
-------- ---------------- -
-- ---------
-以上代码中，我们监听 willScrollToElement 事件，当用户将要滚动到列表的最后一个元素时，执行 fetchListData 方法，加载更多的数据，并渲染到页面中。这样就实现了动态加载列表的功能。
总结
@better-scroll/observe-dom 包提供了一个方便的监听滚动事件的机制，可以应用于多个场景中。在本文中，我们介绍了其的基本使用方法，并演示了它在一些常见场景下的应用。希望读者们能够举一反三，将其应用到自己的项目中，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6e9999a9b7065299ccb9f5