简介
react-not-wheel-outside 是一个 React 组件，可用于在滚动时防止容器内容超出容器边界。它可以让你的应用程序具有更好的用户体验，而且非常容易使用。
安装
- 使用 NPM 进行安装：
npm install react-not-wheel-outside --save
- 导入组件：
import ReactNotWheelOutside from 'react-not-wheel-outside';
使用
基本用法
-- -------------------- ---- -------
------ ------ ----------- ---- --------
------ -------------------- ---- --------------------------
----- --- ------- --------- -
-------- -
------ -
----------------------
---- -------- ------- --------- ------ -----------
-----------------
------
-----------------------
--
-
-
------ ------- ----高级用法
你可以在 ReactNotWheelOutside 组件上使用任何 React 的 Props，这些 Props 将透传到组件的外层元素上。
例如，你可以使用 style 属性来添加一些样式：
<ReactNotWheelOutside style={{ height: '200px', overflow: 'auto' }}>
...
</ReactNotWheelOutside>你也可以使用其他 Props，例如 className 属性：
<ReactNotWheelOutside className="my-app"> ... </ReactNotWheelOutside>
示例代码
-- -------------------- ---- -------
------ ------ ----------- ---- --------
------ -------------------- ---- --------------------------
----- --- ------- --------- -
-------- -
------ -
----------------------
---- -------- ------- --------- ------ -----------
-----------------
------
-----------------------
--
-
-
------ ------- ----小结
react-not-wheel-outside 组件可以让你在 React 中实现滚动容器内容不会超出容器边界，提高了应用程序的用户体验。这个组件非常容易使用，同时也提供了高级用法，让你可以根据自己的需求自定义样式，为你的应用程序增加更好的可定制性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555dd81e8991b448d2ec7