Skip to content

Commit d057315

Browse files
SSSensationalSSSensational
committed
Init commit
0 parents  commit d057315

30 files changed

+1844
-0
lines changed

‎.gitignore

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
site
5+
*.local
6+
stats.html
7+
package-lock.json
8+
yarn.lock
9+
pnpm-lock.yaml

‎.prettierrc.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
singleQuote: true,
3+
tabWidth: 4,
4+
trailingComma: 'all',
5+
printWidth: 140,
6+
tabWidth: 4
7+
};

‎README-zh_CN.md

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
custom-vue-scrollbar(Vue3)
2+
=========================
3+
4+
[custom-react-scrollbar(react版)](https://github.com/custom-lib/custom-react-scrollbar)
5+
6+
中文 | [English](https://github.com/custom-lib/custom-vue-scrollbar/blob/main/READM.md)
7+
8+
**[Demos](https://custom-lib.github.io/custom-vue-scrollbar/)**
9+
10+
是custom-vue-table的前置组件。
11+
12+
* 很少的api，像原生滚动容器一样使用。
13+
* 可以自定义滚动条样式。
14+
* 支持滚动条最小尺寸/最大尺寸设置。
15+
* 自动隐藏滚动条、设置自动隐藏延时。
16+
* 浮动滚动条（当滚动容器超出屏幕可视区域时，让滚动条固定于屏幕底部）。
17+
* 滚动只吃一点cpu占用，不会造成很大的性能问题。可选的debounce/throttle类型与时间监听滚动容器尺寸变化。
18+
* 支持 原生滚动模式（默认） 和 模拟滚动模式（用于如：与浮动元素同步滚动进度等场景）。
19+
* 很轻量，未压缩前16.5kb，压缩后4.5kb（gzip）。
20+
* typescript支持
21+
22+
## 引入
23+
```bash
24+
npm install --save custom-vue-scrollbar
25+
```
26+
27+
```javascript
28+
// main.ts
29+
import CustomScrollbar from 'custom-vue-scrollbar';
30+
import 'custom-vue-scrollbar/dist/style.css';
31+
app.component(CustomScrollbar.name, CustomScrollbar);
32+
33+
declare module 'vue' {
34+
export interface GlobalComponents {
35+
CustomScrollbar: typeof CustomScrollbar;
36+
}
37+
}
38+
```
39+
40+
## 基础用法
41+
42+
像使用原生滚动容器一样给它设置一个固定的尺寸即可。
43+
44+
```javascript
45+
<template>
46+
<custom-scrollbar :style="{ width: '500px', height: '300px' }">
47+
<p>Some great content...</p>
48+
</custom-scrollbar>
49+
</template>
50+
```
51+
52+
### Props
53+
54+
除以下组件Props，也可以使用所以原生DOM属性和事件。
55+
56+
**class** _`:string`_ = undefined
57+
滚动容器class，一般只用来设置尺寸。
58+
59+
**style** _`:object`_ = undefined
60+
滚动容器style。
61+
62+
**contentClass** _`:string`_ = undefined
63+
内容容器class，设置display、padding等的地方。
64+
65+
**contentStyle** _`:object`_ = undefined
66+
内容容器style。
67+
68+
**direction** _`:'horizontal' | 'vertical'`_ = 'vertical'
69+
内容容器默认block布局，如果需要改成横向排列，可以通过设置组件属性 'direction' 为 'horizontal' 来使其布局变为 'display': 'flex' & 'flex-direction': 'row'。 或者通过 'contentClass' / 'contentStyle' 属性来手动设置。但是不建议手动设置，因为 'direction' 属性 与下文 'fixedThumb' 属性 有关。
70+
71+
**thumbMinSize / thumbMaxSize** _`:number`_ = 48 / Infinity
72+
设置滚动条的 最小/最大 尺寸。
73+
74+
**autoHide** _`:boolean`_ = true
75+
开启后，只有当鼠标悬浮于滚动容器上时才会显示滚动条。
76+
77+
**autoHideDelay** _`:number(ms)`_ = 900
78+
当滚动发生后 鼠标移出容器，经过autoHideDelay设置的延迟才会隐藏滚动条。
79+
80+
**autoExpand** _`:boolean`_ = true
81+
滚动条默认是8px宽，实际外部有一个12px的占位容器，点击、拖拽的逻辑是挂在这个占位容器上的(方便点击，8px视觉上舒服但是难点)。当开启这个选项，占位容器hover时，滚动条宽度会变为占位容器的宽度。
82+
83+
**fixedThumb** _`:boolean`_ = false
84+
'direction' 属性指定的方向为 '主轴方向'。开启fixedThumb后，如果辅轴有滚动条，并且主轴方向有部分滚动容器位于屏幕外。辅轴的滚动条将会浮动至屏幕边缘。
85+
86+
**throttleType** _`:'throttle' | 'debounce' | 'none'`_ = 'debounce'
87+
ResizeObserver监听 包裹/内容 容器的尺寸变化来更新滚动条的尺寸。大部分场景下并不需要高频率的刷新，并且大部分场景下使用'debounce'即可。
88+
89+
**throttleWait** _`:number`_ = 333
90+
'throttleType'属性不为'none'时触发的时间。
91+
92+
**simulateScroll** _`:boolean`_ = false
93+
使用wheel模拟滚动代替原生滚动。在需要与外部浮动的元素同步滚动进度时开启，可以消除原生滚动在同步时 不在同一轮事件循环里 带来的抖动。
94+
95+
### Emit
96+
```javascript
97+
interface Rect {
98+
left: number;
99+
top: number;
100+
right: number;
101+
bottom: number;
102+
width: number;
103+
height: number;
104+
x: number;
105+
y: number;
106+
}
107+
```
108+
109+
**wrapperResize** _`:(rect: Rect) => void`_
110+
滚动容器大小改变时触发
111+
112+
**contentResize** _`:(rect: Rect) => void`_
113+
内容容器大小改变时触发
114+
115+
### 覆写滚动条样式
116+
117+
```javascript
118+
// 修改滚动条尺寸(占位容器)，hover前的滚动条显示宽度为占位容器的2/3，如下则为12px。
119+
.scrollbar__thumbPlaceholder--vertical {
120+
width: 20px;
121+
}
122+
.scrollbar__thumbPlaceholder--horizontal {
123+
height: 20px;
124+
}
125+
126+
// 修改滚动条样式。
127+
.scrollbar__thumb {
128+
background-color: red;
129+
}
130+
```
131+
132+
## 运行示例
133+
134+
Run the demos:
135+
```bash
136+
npm install
137+
npm run dev
138+
```
139+
140+
## 打包
141+
142+
```bash
143+
npm install
144+
npm run build:lib
145+
```
146+
147+
## License
148+
149+
MIT
150+
151+
152+
## custom-lib相关QQ群
153+
![image](https://github.com/custom-lib/custom-vue-scrollbar/blob/main/website/assets/qrCode.jpg)

‎README.md

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
custom-vue-scrollbar(Vue3)
2+
=========================
3+
4+
[react version here.](https://github.com/custom-lib/custom-react-scrollbar)
5+
6+
English | [中文](https://github.com/custom-lib/custom-vue-scrollbar/blob/main/README-zh_CN.md)
7+
8+
**[Demos](https://custom-lib.github.io/custom-vue-scrollbar/)**
9+
10+
It's dependencies of custom-vue-table.
11+
12+
* Few APIs, used like native scroll container.
13+
* Customize the scroll bar style.
14+
* Support the minimum size/maximum size setting of the scroll bar.
15+
* Automatically hide the scroll bar and optional set the automatic hide delay.
16+
* Floating scroll bar (when the scroll container exceeds the visible area of ​​the screen, the scroll bar is fixed at the bottom of the screen).
17+
* High performance.Optional debounce/throttle to observe size changes.。
18+
* Support native scroll mode (default) and simulate scroll mode (useful in scenes such as: scroll synchronously with outer float elements).
19+
* it's lightweight.16.5kb uncompressed, 4.5kb after compression (gzip).
20+
* typescript support.
21+
22+
## Install
23+
```bash
24+
npm install --save custom-vue-scrollbar
25+
```
26+
27+
```javascript
28+
// main.ts
29+
import CustomScrollbar from 'custom-vue-scrollbar';
30+
import 'custom-vue-scrollbar/dist/style.css';
31+
app.component(CustomScrollbar.name, CustomScrollbar);
32+
33+
declare module 'vue' {
34+
export interface GlobalComponents {
35+
CustomScrollbar: typeof CustomScrollbar;
36+
}
37+
}
38+
```
39+
40+
## Basic Usage
41+
42+
Just give it a fixed size like using a native scroll container.
43+
44+
```javascript
45+
<template>
46+
<custom-scrollbar :style="{ width: '500px', height: '300px' }">
47+
<p>Some content...</p>
48+
</custom-scrollbar>
49+
</template>
50+
```
51+
52+
53+
### Props
54+
55+
In addition to the following component Props, all native DOM properties and events can also be used.
56+
57+
**class** _`:string`_ = undefined
58+
Container class, which is generally only used to set the size.
59+
60+
**style** _`:object`_ = undefined
61+
Container style.
62+
63+
**contentClass** _`:string`_ = undefined
64+
Content class, the place to set display, padding, etc.
65+
66+
**contentStyle** _`:object`_ = undefined
67+
Content style.
68+
69+
**direction** _`:'horizontal' | 'vertical'`_ = 'vertical'
70+
If you need to change the content container to horizontal layout, you can set the component property 'direction' to 'horizontal' to change the layout to 'display': 'flex' & 'flex-direction': 'row'. Or set it manually via 'contentClass' / 'contentStyle' properties. However, it is not recommended to set it manually, as the 'direction' property is related to the 'fixedThumb' property below.
71+
72+
**thumbMinSize / thumbMaxSize** _`:number`_ = 48 / Infinity
73+
Sets the minimum/maximum size of the scrollbar.
74+
75+
**autoHide** _`:boolean`_ = true
76+
When turned on, the scrollbar will be displayed only when the mouse hovers over the scroll container.
77+
78+
**autoHideDelay** _`:number(ms)`_ = 900
79+
When the scrolling is triggered, the scrollbar will be hidden only after the delay set by autoHideDelay.
80+
81+
**autoExpand** _`:boolean`_ = true
82+
Scroll bar default is 8px wide, the actual external has a 12px placeholder container, click, drag and drop logic is hanging on this placeholder container (convenient to click, 8px visually comfortable but difficult). When this option is turned on, the occupancy container hover, the scrollbar width will change to the width of the occupancy container.
83+
84+
**fixedThumb** _`:boolean`_ = false
85+
The 'direction' property specifies the direction as the 'major axis direction'. When the 'fixedThumb' property is turned on, if the secondary axis has a scrollbar and the major axis has a scroll container that is partially off-screen. The scrollbars of the secondary axis will float to the edge of the screen.
86+
87+
**throttleType** _`:'throttle' | 'debounce' | 'none'`_ = 'debounce'
88+
ResizeObserver listens for changes in the size of the container/content DOM Node to update the size of the scrollbar. Most scenarios do not require a high refresh rate and using 'debounce' is sufficient in most scenarios.
89+
90+
**throttleWait** _`:number`_ = 333
91+
The time to trigger when the 'throttleType' attribute is not 'none'.
92+
93+
**simulateScroll** _`:boolean`_ = false
94+
Use 'wheel' to simulate scrolling instead of native scrolling. Turn it on when you need to synchronize the scrolling progress with an external floating element to eliminate the jitter caused by native scrolling that is not in the same event loop when synchronizing.
95+
96+
### Emit
97+
98+
```javascript
99+
interface Rect {
100+
left: number;
101+
top: number;
102+
right: number;
103+
bottom: number;
104+
width: number;
105+
height: number;
106+
x: number;
107+
y: number;
108+
}
109+
```
110+
111+
**wrapperResize** _`:(rect: Rect) => void`_
112+
Triggered when the size of the scroller container changes
113+
114+
**contentResize** _`:(rect: Rect) => void`_
115+
Triggered when the size of the scroller content changes
116+
117+
### Overwrite scrollbar style
118+
119+
```javascript
120+
// Modify the scrollbar size (placeholder container), the width of the scrollbar display before hover is 2/3 of the placeholder container, as follows, it is 12px.
121+
.scrollbar__thumbPlaceholder--vertical {
122+
width: 20px;
123+
}
124+
.scrollbar__thumbPlaceholder--horizontal {
125+
height: 20px;
126+
}
127+
128+
// Modify the scrollbar style.
129+
.scrollbar__thumb {
130+
background-color: red;
131+
}
132+
```
133+
134+
## Running example
135+
136+
Run the demos:
137+
```bash
138+
npm install
139+
npm run dev
140+
```
141+
142+
## Build lib
143+
```bash
144+
npm install
145+
npm run build:lib
146+
```
147+
148+
## License
149+
150+
MIT

‎index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="icon" href="/website/assets/logo.ico" />
7+
<title>@custom-lib/custom-vue-scrollbar</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/website/main.ts"></script>
12+
</body>
13+
</html>

‎package.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "custom-vue-scrollbar",
3+
"version": "0.0.5",
4+
"license": "MIT",
5+
"module": "dist/index.js",
6+
"types": "dist/index.d.ts",
7+
"files": [
8+
"/dist"
9+
],
10+
"sideEffect": false,
11+
"scripts": {
12+
"dev": "vite",
13+
"build:site": "vite build",
14+
"build:lib": "vite build --config vite-lib.config.ts && cp ./types/index.d.ts ./dist"
15+
},
16+
"peerDependencies": {
17+
"lodash-es": "^4.17.21",
18+
"vue": "^3.2.13"
19+
},
20+
"devDependencies": {
21+
"@types/lodash-es": "^4.17.5",
22+
"@types/stats.js": "^0.17.0",
23+
"@vitejs/plugin-vue": "^1.9.2",
24+
"@vue/compiler-sfc": "^3.2.19",
25+
"rollup-plugin-visualizer": "^5.5.2",
26+
"sass": "^1.42.1",
27+
"stats.js": "^0.17.0",
28+
"typescript": "^4.4.3",
29+
"vite": "^2.6.2",
30+
"vue-i18n": "^9.2.0-beta.11"
31+
},
32+
"dependencies": {
33+
"lodash-es": "^4.17.21",
34+
"vue": "^3.2.19"
35+
}
36+
}

0 commit comments

Comments
 (0)