在 Web 开发中，一般情况下我们会将多个组件放在同一个容器中，并且根据需要进行滚动。然而，在某些情况下，我们希望某个组件滚动时独立于其他组件。这时，就可以使用 npm 包 react-isolated-scroll 来实现。
react-isolated-scroll 简介
react-isolated-scroll 是一个专为 React 进行设计的滚动组件。通过引入 react-isolated-scroll，我们可以非常容易地实现组件之间的独立滚动。同时，该包还可以针对性地对某个组件进行一些滚动相关的设置，比如滚动条的风格、滚动位置的控制等。
安装 react-isolated-scroll
使用 npm 包管理器进行安装，命令如下：
$ npm i react-isolated-scroll
安装完成后，使用以下代码进行导入：
import { IsolatedScroll } from 'react-isolated-scroll';IsolatedScroll 组件使用
下面，让我们通过一个示例来看看如何使用 IsolatedScroll：
先建立两个组件，分别为 Scroller 和 Content，其中 Scroller 组件具有一个 500 像素高度的固定框，而 Content 组件有一个超出固定框高度的红色区域，需要滚动才能查看其中的内容。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- ------------------------
----- -------- - -- -------- -- -- -
------ -
---- -------- ------- -------- --------- ------ ---
----------
------
--
--
----- ------- - -- -- -
------ -
---------------
---------------
----------------------
-------------
-
---- --------
------- ----
---------------- -----
---
---------- --------
------
-----------------
--
--
------ ------- -------- ----- -
------ -
----------
-------- --
-----------
--
-在上面的示例中，首先我们使用 Scroller 组件包裹了 Content 组件。然后，在 Content 组件中，我们使用 IsolatedScroll 组件将 “红色内容区域” 进行包裹。在 IsolatedScroll 组件中，我们设置了 boxHeight、hideScrollbars 和 scrollTop 这三个属性。
其中，boxHeight 这个属性指定了滚动容器的高度，以及内部内容的高度。hideScrollbars 属性用于控制是否隐藏滚动条。scrollTop 表示滚动条距离顶部的距离。
通过这些配置，我们就可以很容易地将 Content 组件进行独立滚动，并且实现一些个性化的滚动设置。
小结
在本文中，我们介绍了使用 npm 包 react-isolated-scroll 来实现组件之间的独立滚动。通过对 IsolatedScroll 组件进行配置，我们可以非常容易地对组件进行滚动控制。在开发过程中，可以根据具体需求，针对性地对 IsolatedScroll 组件进行一些个性化的设置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef03624efcef77a054b75b8