简介
bonaparte-scroll 是一个可以轻松添加水平和垂直滚动的npm 包。使用这个包可以快速的添加滚动条到您的网站或应用程序中去。它非常适用于需要自定义滚动条的前端项目，使用了 CSS3 translate3d / transition 这些最先进的技术来提高性能并提供流畅的滚动效果。
安装
在使用 bonaparte-scroll 之前，您需要先安装它。可以通过 npm 来安装：
npm install bonaparte-scroll --save
快速开始
要使用 bonaparte-scroll，您需要使用两个重要的 DOM 元素。第一个是一个包含内容的元素，第二个是一个这些内容包含的元素的旁边的滚动区域。
HTML
您可以在两个元素中添加 class 来定义它们。例如：
<div class="scrollArea">
<div class="scrollContent">
Your content here
</div>
</div>CSS
为了更好地控制样式和外观，您可以添加自己的 CSS。以下是一些最小的样式，以使滚动区域和包含元素的大小正确。
-- -------------------- ---- ------- ----------- - ------ ------ ------- ------ --------- --------- --------- ------- - -------------- - --------- --------- ---- -- ----- -- ------ ----- ------- ----- --------- ------- -
JavaScript
在您准备好 HTML 和 CSS 之后，接下来您需要调用 bonaparte-scroll 函数并传入滚动区域和内容元素。
import bonaparteScroll from 'bonaparte-scroll';
const scrollArea = document.querySelector('.scrollArea');
const scrollContent = document.querySelector('.scrollContent');
bonaparteScroll(scrollArea, scrollContent);好了，这样就可以开始滚动了！
自定义选项
默认情况下，bonaparte-scroll 用户可以使用以下配置选项：
-- -------------------- ---- ------- ----- ------- - - ------------- ----- -- ---------- ------------- ----- -- ---------- ----------- ------------- -- -------------- ----------- ------------- -- -------------- ---------- ------------------- -- --------------- ---------- ------------------- -- --------------- -------------- --- -- -------------- --------------- ---- -- --------- --
您可以通过调用 bonaparte-scroll 函数的第三个参数同时传入上述自定义设置来覆盖默认值。例如：
bonaparteScroll(scrollArea, scrollContent, {
railVisibleX: false,
railVisibleY: true,
ressizableRail: true,
scrollbarHide: true,
scrollToBorder: true
});示例
这是一个使用 bonaparte-scroll 在元素中添加了自定义滚动条的基本示例。
-- -------------------- ---- -------
---- -------------------
---- ----------------------
----
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-------- -------
-----
------
-------- -------------------- ---- ------- ----------- - ------ ------ ------- ------ --------- --------- --------- ------- - -------------- - --------- --------- ---- -- ----- -- ------ ----- ------- ----- --------- ------- - ----------- ------------ ----------- ----------- - --------- --------- ------- ---- ----------- ----- -------- -- ----------- ------- --- ------------ - ----------- ----------- - ------ ---- ------ -- - ----------- ------------------ ----------- ----------------- - --------- --------- ---- -- ----- -- ------- ----- ------ ----- ----------- ----- ----------- --------- --- ------------ ------------ ---------- - ----------------- ------------ ----------------- ----------- - -------- -- - ----------- ----------------- - ---------- -------------- -- --- ------------ ---------- - ----------- ----------------- - ---------- -------------- -- --- ------------ ---------- -
-- -------------------- ---- ------- ------ --------------- ---- ------------------- ----- ---------- - -------------------------------------- ----- ------------- - ----------------------------------------- --------------------------- -------------- - ------------- ------ ------------- ----- --------------- ----- -------------- ----- --------------- ---- ---
结论
bonaparte-scroll 是一个非常实用的 npm 包，使您能够轻松地添加自定义的滚动条到您的应用程序或网站中去。无论是大规模的商业应用，还是稍小的开源项目，它都能满足您的需求。使用这个包可以提供更好的用户体验，同时也可以让您的编码工作更加容易和可重用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c81ccdc64669dde4cc1