perfect-scrollbar 一个全浏览器适用的自定义scrollbar,使用方法 中文文档

谢泉
2023-12-01

在开发过程中为了保持界面样式的一致性,需要自定义scrollbar的样式,可是只有chrome可以定义样式,IE只能设置颜色,火狐是直接不可以设置,于是就找了这个库,它是github开源的,但没有中文文档,只有英文的,下面是我翻译的中文文档,英语水平不好,有错请见谅,可以评论告诉我修改。

源码以及英文api:GitHub地址:点我点我

使用中的一些常见问题可以在这个官方wiki中找到:点我点我

注意

除非不得不使用自定义滚动条,否则始终建议使用浏览器自带的滚动条。

支持chrome、IE11、edge、火狐等浏览器,其中IE11中的scrollbar在使用时会有一点渲染问题,缺点是不支持IE10以下的IE和edge。其他的旧版浏览器我没有测试。

文档开始

安装

npm

npm是安装和使用perfect-scrollbar的最佳方法。它已注册为perfect-scrollbar

$ npm install perfect-scrollbar

说明书下载

您可以从Releases手动下载perfect-scrollbar 。

在GitHub上下载

如果要使用插件的开发版本,请手动从源代码进行构建。开发版本可能不稳定。网址在这里

$ git clone https://github.com/mdbootstrap/perfect-scrollbar.git
$ cd perfect-scrollbar
$ npm install
$ npm run build

 

如何使用

首先,请检查container元素是否符合要求,并且已导入主CSS。

<style>
  #container {
    position: relative;
    width: 600px;
    height: 400px;
  }
</style>
<link rel="stylesheet" href="css/perfect-scrollbar.css">

通过ES模块导入:

import PerfectScrollbar from 'perfect-scrollbar';

或在browser中(直接引入js文件):

<script src="dist/perfect-scrollbar.js"></script>

初始化:

const container = document.querySelector('#container');
const ps = new PerfectScrollbar(container);

// or just with selector string
const ps = new PerfectScrollbar('#container');

可以使用option进行初始化。(推荐使用这种方式,因为这样可以更细致的设置,设置方法在下面)

const ps = new PerfectScrollbar('#container', {
  wheelSpeed: 2,
  wheelPropagation: true,
  minScrollbarLength: 20
});

如果容器或内容的大小发生变化,请使用update进行更新

ps.update();

如果要销毁滚动条,请使用destroy

ps.destroy();
ps = null; // to make sure garbages are collected

如果您想滚动到某个地方,只需更新scrollTop

const container = document.querySelector('#container');
container.scrollTop = 0;

您还可以案例中获取有关如何使用插件的信息 。案例网址在这里:点我点我

options

(通过在option中设置以下属性可以更细致的设置scrollbar的样式)

handlers {String[]}

它是处理程序列表,用于滚动元素。(这里面是可以操作滚动条的方式)

默认['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch']

wheelSpeed {Number}

应用于鼠标滚轮事件的滚动速度。

默认1

wheelPropagation {Boolean}

如果这个选项为true,当滚动到达底端,鼠标滚轮事件将被传给父元素。

默认false

swipeEasing {Boolean}

如果此选项为true,将简化滑动滚动。

默认true

minScrollbarLength {Number?}

设置为整数值时,滚动条的拇指部分(就是滚动条的高亮部分)不会缩小到该像素数以下(最小宽度)

默认null

maxScrollbarLength {Number?}

设置为整数值时,滚动条的拇指部分将不会扩展到该数量的像素。

默认null

scrollingThreshold {Number}

这将设置阈值,ps--scrolling-xps--scrolling-y保留类别。在默认CSS中,无论悬停状态如何,它们都会显示滚动条。单位是毫秒。(scrollbar的响应时间)

默认1000

useBothWheelAxes {Boolean}

设置为true时,只有一个(垂直或水平)滚动条可见,然后垂直和水平滚动都会影响该滚动条。

默认false

suppressScrollX {Boolean}

设置为true时,无论内容宽度如何,X轴上的滚动条都将不可用。

默认false

suppressScrollY {Boolean}

设置为true时,无论内容高度如何,Y轴上的滚动条都不可用。

默认false

scrollXMarginOffset {Number}

在不启用X轴滚动条的情况下,内容宽度可以超过容器宽度的像素数。允许一些“摆动空间”或“偏移中断”,因此仅由于几个像素而不能启用X轴滚动条。

默认0

scrollYMarginOffset {Number}

在不启用Y轴滚动条的情况下,内容高度可以超过容器高度的像素数。允许一些“摆动空间”或“偏移中断”,因此仅由于几个像素而不能启用Y轴滚动条。

默认0

Events 事件

自定义事件。

container.addEventListener('ps-scroll-x', () => ...);

ps-scroll-y

此事件在y轴在任一方向上滚动。

ps-scroll-x

此事件在x轴在任一方向上滚动。

ps-scroll-up

向上滚动时,该事件触发。

ps-scroll-down

向下滚动时,此事件触发。

ps-scroll-left

向左滚动时,该事件触发。

ps-scroll-right

向右滚动时,该事件触发。

ps-y-reach-start

滚动此事件在到达y轴的开始。

ps-y-reach-end

滚动此事件在到达y轴(对于无限滚动有用)的端部。

ps-x-reach-start

滚动此事件在到达x轴的开始。

ps-x-reach-end

滚动此事件在到达x轴的端部。

您也可以通过观看REACH状态reach属性。

const ps = new PerfectScrollbar(...);

console.log(ps.reach.x); // => 'start' or 'end' or null
console.log(ps.reach.y); // => 'start' or 'end' or null

文档结束

关于样式(颜色透明度等),可以通过设置.ps__rail-y等的css进行设置,注意加!important,

最后是我测试用的demo

<!DOCTYPE html>
<html>
	<head>
		<title>perfect-scrollbar</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="css/perfect-scrollbar.css" rel="stylesheet">
		<style>
			#device_scroll {
				float: left;
				background-color: #0F152F;
				width: 517px;
				height: 521px;
				color: white;
				/*overflow: hidden;
				position: relative;
				是必须有的*/
				overflow: hidden;
				position: relative;
				display: none;
			}
			/*滚动条*/
			/*y 是纵轴*/
			/*scrollbar背景*/
			.ps__rail-y {
				background-color: red;
			}
			/*静置时的样式*/
			.ps__thumb-y {
				background-color: green !important;
			}
			/*动态样式*/
			.ps .ps__rail-y:hover,
			.ps .ps__rail-y:focus,
			.ps .ps__rail-y.ps--clicking {
				background-color: red;
				opacity: 0.9;
			}
		</style>
	</head>
	<body>
		<div id="device_scroll">
			<div class="">
				dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />
			</div>
		</div>
		<script src="js/perfect-scrollbar.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//初始化滚动条scrollbar
			const ps = new PerfectScrollbar('#device_scroll', {
				//滚动速度,默认为1
				wheelSpeed: 1,
				//最小宽度 单位px
				suppressScrollX: true,
				//到达最低端时告知父元素
				wheelPropagation: true,
				//最小宽度
				minScrollbarLength: 20
			});
		</script>
	</body>
</html>

 

 类似资料: