代码拉取完成，页面将自动刷新
是一款基于 OverlayScrollbars 及 smoothscroll-for-websites 的整合插件，它隐藏了原生滚动条，提供了自定义样式的覆盖滚动条，并保留了原生功能和感觉，同时具有滚动惯性。
npm install @kwooshung/react-overlay-scrollbars-smooth
yarn add @kwooshung/react-overlay-scrollbars-smooth
pnpm add @kwooshung/react-overlay-scrollbars-smooth
在某些框架中直接在全局css / less / scss中引入样式即可，如下所示：
@import url('@kwooshung/react-overlay-scrollbars-smooth/dist/react-overlay-scrollbars-smooth.css');
在部分框架中，如 Next.js 中，可能需要加入~符，才行，如下所示：
@import url('~@kwooshung/react-overlay-scrollbars-smooth/dist/react-overlay-scrollbars-smooth.css');
你也可以在全局页面，如 Next.js 中的 Layout 页面 或 对应组件 中引入，如下所示：
import '@kwooshung/react-overlay-scrollbars-smooth/dist/react-overlay-scrollbars-smooth.css';
在某个元素上使用 OverlayScrollbarsSmooth 组件，如下所示：
import { OverlayScrollbarsSmooth } from '@kwooshung/react-overlay-scrollbars-smooth';
// 这里使用的是直接在组件中引入次样式，也可以使用上面其他的方式
import '@kwooshung/react-overlay-scrollbars-smooth/dist/react-overlay-scrollbars-smooth.css';
function App() {
return (
<div style={{ height: '300px' }}>
<OverlayScrollbarsSmooth>
<div style={{ height: '1000px' }} />
</OverlayScrollbarsSmooth>
</div>
);
}
如果你想让它作用于 Body 上，可以这样做：
import { OverlayScrollbarsSmooth } from '@kwooshung/react-overlay-scrollbars-smooth';
function App() {
// 这行代码无论写到什么地方，只要 `tag=body`，它就会作用于 `Body` 上，从而替代默认滚动条。别忘记引入样式！
return <OverlayScrollbarsSmooth tag='body' />;
}
你可以直接使用 useSmoothScroll 实现平滑滚动，它将会导致所有的滚动条都变得平滑，建议在全局布局之类的地方调用一次即可，如下所示：
import { OverlayScrollbarsSmooth, useSmoothScroll } from '@kwooshung/react-overlay-scrollbars-smooth';
import '@kwooshung/react-overlay-scrollbars-smooth/dist/react-overlay-scrollbars-smooth.css';
function App() {
useSmoothScroll();
return (
<div style={{ height: '300px' }}>
<OverlayScrollbarsSmooth>
<div style={{ height: '1000px' }} />
</OverlayScrollbarsSmooth>
</div>
);
}
OverlayScrollbarsSmooth 组件支持所有 OverlayScrollbars 的 API，你可以在这里查看 OverlayScrollbars API。
| 属性 | 说明 |
|---|---|
| tag | string，默认值：div，如果是：body，作用于 Body 上，从而替代默认滚动条。等同于 OverlayScrollbars 的 element； |
| className | string，默认值：''，自定义类名；tag=body 时，无效； |
| options | 等同于 OverlayScrollbars 的 options，默认：{scrollbars: {theme: 'os-theme-dark'}} |
| events | 等同于 OverlayScrollbars 的 events，默认：{} |
支持 smoothscroll-for-websites 除 excluded 之外的所有参数，你可以在这里查看 smoothscroll-for-websites API，以下参数同时也是默认值（它和 smoothscroll-for-websites 的默认值略有区别），你可以根据自己的需求进行修改，如下所示
import { OverlayScrollbarsSmooth, useSmoothScroll } from '@kwooshung/react-overlay-scrollbars-smooth';
import '@kwooshung/react-overlay-scrollbars-smooth/dist/react-overlay-scrollbars-smooth.css';
function App() {
useSmoothScroll({
// Scrolling Core
frameRate: 150, // [ms]
animationTime: 1000, // [ms]
stepSize: 100, // [px]
// Pulse (less tweakable)
// ratio of "tail" to "acceleration"
pulseAlgorithm: true,
pulseScale: 4,
pulseNormalize: true,
// Acceleration
accelerationDelta: 50,
accelerationMax: 3,
// Keyboard Settings
keyboardSupport: true,
arrowScroll: 50,
// Other
touchpadSupport: false, // ignore touchpad by default
fixedBackground: true
});
return (
<div style={{ height: '300px' }}>
<OverlayScrollbarsSmooth>
<div style={{ height: '1000px' }} />
</OverlayScrollbarsSmooth>
</div>
);
}
感谢项目作者为开源社区的无私贡献，让我们的工作变得更加简单！！！
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手