Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1433dc1

Browse files
committed
thiat's it
1 parent 318ea73 commit 1433dc1

File tree

8 files changed

+213
-30
lines changed

8 files changed

+213
-30
lines changed

‎README.md‎

Lines changed: 152 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,152 @@
1-
正在做...
1+
# vue-ohyeah-scroll
2+
3+
仿MAC系统的滚动条,MAC系统上的滚动条我觉得是最舒服的
4+
5+
> 不支持移动端,移动端不需要美化,iphone本来就很棒,Android可以用-webkit-scrollbar来调整
6+
7+
### 特性
8+
* [x] 默认是MAC系统的主题,也可以自定义轨道和滑块颜色
9+
* [x] 可以设置滚动条显示在左边或上面
10+
* [x] 自动显隐滚动条
11+
* [x] 动态手动设置滚动条的scrollTop和scrollLeft
12+
* [x] 支持一键滚动到底部
13+
* [x] 内容随意增减,父级容器随便改变大小
14+
15+
### DEMO
16+
17+
<a href="https://isluo.com/work/vue-ohyeah-scroll" target="_blank" rel="nofollow me noopener noreferrer">https://isluo.com/work/vue-ohyeah-scroll</a>
18+
19+
### 安装
20+
21+
```js
22+
yarn add vue-ohyeah-scroll
23+
```
24+
25+
### 使用
26+
27+
全局注册
28+
```js
29+
import OhyeahScroll from './packages/ohyeah';
30+
Vue.use(OhyeahScroll);
31+
```
32+
33+
局部注册
34+
```js
35+
import { OhyeahScroll } from './packages/ohyeah';
36+
37+
export default {
38+
components:{
39+
OhyeahScroll
40+
}
41+
}
42+
```
43+
44+
组件中使用
45+
```js
46+
<template>
47+
<ohyeah-scroll>
48+
...
49+
</ohyeah-scroll>
50+
</template>
51+
```
52+
53+
### 自定义属性
54+
55+
| 属性名 | 类型 | 默认值 | 描述 |
56+
| ---------- | ------- | ------------------------ | ---------------------------------------- |
57+
| breadth | Number | 6 | 滑块的粗细 |
58+
| thumbColor | String | #7f7f7f | 滑块的颜色,接受CSS颜色值 |
59+
| trackColor | String | rgba(255, 255, 255, 0.5) | 轨道的颜色,接受CSS颜色值 |
60+
| autoHide | Boolean | true | 是否自动隐藏滚动条,鼠标在区域内才显示 |
61+
| left | Boolean | false | 是否把垂直滚动条放在容器的左边 |
62+
| top | Boolean | false | 是否把水平滚动条放在容器的顶端 |
63+
| noVer | Boolean | false | 是否禁用垂直滚动条(overflow-y:hidden) |
64+
| noHor | Boolean | false | 是否禁用水平滚动条(overflow-x:hidden) |
65+
| minLength | Number | 20 | 当内容无限多的时候,滑块最短不得低于此值 |
66+
67+
68+
### 自定义事件
69+
70+
<table>
71+
<thead>
72+
<tr>
73+
<th>事件名</th>
74+
<th>描述</th>
75+
<th>返回值</th>
76+
</tr>
77+
<thead>
78+
<tbody>
79+
<tr>
80+
<td>onVerStart</td>
81+
<td>每次垂直滚动条抵达顶部时将触发一次</td>
82+
<td>
83+
<pre>
84+
{
85+
offsetHeight: 内容区的总高度,
86+
offsetWidth: 内容区的总宽度,
87+
height: 容器的高度,
88+
width: 容器的宽度,
89+
scrollTop: 内容区已被滚到上边去的距离,
90+
scrollLeft: 内容区已被滚到左边去的距离
91+
}
92+
</pre>
93+
</td>
94+
</tr>
95+
<tr>
96+
<td>onVerEnd</td>
97+
<td>每次垂直滚动条抵达底部时将触发一次</td>
98+
<td>同上</td>
99+
</tr>
100+
<tr>
101+
<td>onHorStart</td>
102+
<td>每次水平滚动条抵达最左边时将触发一次</td>
103+
<td>同上</td>
104+
</tr>
105+
<tr>
106+
<td>onHorEnd</td>
107+
<td>每次水平滚动条抵达最左边时将触发一次</td>
108+
<td>同上</td>
109+
</tr>
110+
<tr>
111+
<td>onScroll</td>
112+
<td>当滚动条的位置变化时就会触发一次,无论是垂直滚动条还是水平滚动条</td>
113+
<td>同上</td>
114+
</tr>
115+
</tbody>
116+
</table>
117+
118+
### 自身方法
119+
120+
| 方法名 | 参数 | 描述 |
121+
| -------- | ---------- | ------------------------ |
122+
| scrollTo | (x,y,time) | 将滚动条滚动到指定的位置 |
123+
124+
用法:
125+
```js
126+
<template>
127+
<!-- 需要定义一个ref -->
128+
<ohyeah-scroll ref="ohyeah">
129+
...
130+
</ohyeah-scroll>
131+
</template>
132+
133+
<script>
134+
export default {
135+
methods:{
136+
scrollTo(){
137+
// 水平滚50个像素,垂直滚100个像素,在300ms内完成
138+
this.$refs.ohyeah.scrollTo(50, 100, 300);
139+
},
140+
scrollToEnd(){
141+
// 水平滚到最左边,垂直滚到底,瞬间完成
142+
this.$refs.ohyeah.scrollTo(0, 'end', 0);
143+
}
144+
}
145+
}
146+
</script>
147+
```
148+
149+
### that's it
150+
151+
- 你也可以直接把src/package/ohyeah.vue拷贝出来用,这样有利于减小一点体积,毕竟我把CSS和其他东西都打包到一个js里了。
152+
- 直接使用的话,需要自己安装```element-resize-detector```,这个用于检测容器大小变化

‎dist/ohyeah-scroll.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ohyeah-scroll.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
2-
"name": "vue-ohyeah",
3-
"description": "A Vue.js project",
4-
"version": "1.0.0",
5-
"author": "L <376693576@qq.com>",
2+
"name": "vue-ohyeah-scroll",
3+
"description": "prettier scroll",
4+
"version": "0.0.3",
5+
"author": "L <https://blog.isluo.com>",
66
"license": "MIT",
77
"private": false,
88
"main": "dist/ohyeah-scroll.js",

‎src/App.vue‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,19 @@
44
<p>a</p>
55
<div ref="box"
66
class="demo-div">
7-
<ohyeah-scroll ref="scroll1"
8-
no-hor
9-
:no-ver="noV"
10-
@onVerStart="onVerStart"
11-
@onVerEnd="onVerEnd"
12-
@onScroll="onScroll"
13-
trackColor="transparent">
7+
<OhyeahScroll ref="scroll1"
8+
:no-hor="noV"
9+
@onVerStart="onVerStart"
10+
@onVerEnd="onVerEnd"
11+
@onScroll="onScroll"
12+
trackColor="transparent">
1413
<ul>
1514
<li v-for="(item,index) in arr"
15+
:style="`width:${width}px`"
1616
:key="index">{{`${item}-${index}`}}</li>
1717
</ul>
18-
</ohyeah-scroll>
18+
<div>333</div>
19+
</OhyeahScroll>
1920
</div>
2021
<div class="demo-div2">
2122
<div v-for="(item,index) in arr"
@@ -32,25 +33,38 @@
3233
</template>
3334

3435
<script>
36+
import { OhyeahScroll } from "../dist/ohyeah-scroll";
37+
3538
export default {
3639
name: "app",
3740
data() {
3841
return {
3942
msg: "Welcome to Your Vue.js App",
4043
arr: new Array(20).fill("a"),
41-
noV: false
44+
noV: false,
45+
width: 200
4246
};
4347
},
44-
mounted() {},
48+
components: {
49+
OhyeahScroll
50+
},
51+
mounted() {
52+
// console.log("什么情况:", OhyeahScroll);
53+
},
4554
methods: {
4655
add() {
4756
this.arr.push(this.arr.length + 1);
57+
this.width = this.width + 100;
4858
},
4959
plus() {
5060
this.arr.splice(-1, 1);
61+
this.width = this.width - 100;
5162
},
5263
changeBox() {
53-
this.$refs.box.style.height = Math.random() * 200 + 300 + "px";
64+
console.log("change?");
65+
// this.$refs.box.style.height = Math.random() * 200 + 300 + "px";
66+
// this.$refs.box.style.width = Math.random() * 200 + 300 + "px";
67+
this.$refs.box.style.height = 25 + "px";
5468
},
5569
onVerStart(obj) {
5670
console.log("到顶了:", obj);
@@ -62,7 +76,7 @@ export default {
6276
console.log("正在滚动:", obj);
6377
},
6478
onScrollTo() {
65-
this.$refs.scroll1.scrollTo("end", "end", 0);
79+
this.$refs.scroll1.scrollTo("end", "end", 300);
6680
}
6781
}
6882
};

‎src/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import OhyeahScroll from './packages/ohyeah';
22

3+
const components = [OhyeahScroll];
34
const install = function(Vue, opts = {}) {
45
components.map(component => {
56
Vue.component(component.name, component);
@@ -12,5 +13,6 @@ if (typeof window !== 'undefined' && window.Vue) {
1213

1314
export default {
1415
install,
15-
OhyeahScroll,
1616
};
17+
18+
export { OhyeahScroll };

‎src/main.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import Vue from 'vue';
22
import App from './App.vue';
33

4-
import OhyeahScroll from './packages/ohyeah';
5-
Vue.use(OhyeahScroll);
4+
// import OhyeahScroll from './packages/ohyeah';
5+
//import OhyeahScroll from '../dist/ohyeah-scroll';
6+
// Vue.use(OhyeahScroll);
67

78
new Vue({
89
el: '#app',

‎src/packages/ohyeah/ohyeah.vue‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
@mouseenter.stop="hoverH = true"
99
@mouseleave.stop="hoverH = false"
1010
:style="`background-color:${trackColor};opacity:${autoHide? 0 : 0.8}`"
11-
:class="['ohyeah-scroll-vertical-track-h',{'disabled': !isShowH},{'show': barHDown }]">
11+
:class="['ohyeah-scroll-vertical-track-h',{'disabled': !isShowH},{'show': barHDown },{'left': left}]">
1212
<div @mousedown.stop="onBarMousedown($event, 1)"
1313
ref="ohyeahbarh"
1414
:style="`transition:transform ${transSpeed}ms,width 250ms;background-color:${thumbColor};width:${(hoverH || barHDown )? breadth + 4 : breadth}px;height: ${barHTall}px;transform: translateY(${barHScrollTop}px);border-radius:${breadth}px`"></div>
@@ -19,10 +19,10 @@
1919
@mouseenter.stop="hoverW = true"
2020
@mouseleave.stop="hoverW = false"
2121
:style="`background-color:${trackColor};opacity:${autoHide? 0 : 0.8}`"
22-
:class="['ohyeah-scroll-vertical-track-w',{'disabled': !isShowW},{'show': barWDown }]">
22+
:class="['ohyeah-scroll-vertical-track-w',{'disabled': !isShowW},{'show': barWDown },{'top': top}]">
2323
<div @mousedown.stop="onBarMousedown($event,2)"
2424
ref="ohyeahbarw"
25-
:style="`transition:transform ${transSpeed}ms;background-color:${thumbColor};height:${(hoverW || barWDown) ? breadth + 4 : breadth}px;width: ${barWTall}px;transform: translateX(${barWScrollLeft}px)`"></div>
25+
:style="`transition:transform ${transSpeed}ms,height 250ms;background-color:${thumbColor};height:${(hoverW || barWDown) ? breadth + 4 : breadth}px;width: ${barWTall}px;transform: translateX(${barWScrollLeft}px)`"></div>
2626
</div>
2727
<!-- 默认内容 -->
2828
<div ref="ohyeahbody"
@@ -67,10 +67,13 @@ export default {
6767
props: {
6868
noVer: { type: Boolean, default: false }, // 是否禁用垂直滚动条
6969
noHor: { type: Boolean, default: false }, // 是否禁用横向滚动条
70+
left: { type: Boolean, default: false }, // 垂直滚动条是否依附于容器左边
71+
top: { type: Boolean, default: false }, // 横向滚动条是否依附于容器顶部
7072
breadth: { type: Number, default: 6 }, // bar宽窄
7173
trackColor: { type: String, default: "rgba(255, 255, 255, 0.5)" }, // 轨道背景色
7274
thumbColor: { type: String, default: "#7f7f7f" }, // 滑块背景色
73-
autoHide: { type: String, default: true } // 是否自动隐藏滚动条
75+
autoHide: { type: Boolean, default: true }, // 是否自动隐藏滚动条
76+
minLength: { type: Number, default: 20 } // 滑块最小长度
7477
},
7578
mounted() {
7679
// 监听内部宽高变化,用于调整滚动条大小和位置
@@ -79,7 +82,6 @@ export default {
7982
// 监听鼠标拖动事件
8083
document.addEventListener("mousemove", this.onBarDragMove);
8184
document.addEventListener("mouseup", this.onMouseUp);
82-
this.$refs.ohyeahbarh.add;
8385
},
8486
beforeDestroy() {
8587
// 卸载鼠标拖动事件
@@ -182,7 +184,10 @@ export default {
182184
183185
if (this.realShowH) {
184186
const temp = this.barHScrollTop * this.scaleH;
185-
this.barHTall = Math.max((a.height / b.height) * this.trickH, 20);
187+
this.barHTall = Math.max(
188+
(a.height / b.height) * this.trickH,
189+
this.minLength > a.height ? 0 : this.minLength
190+
);
186191
this.scaleH = (b.height - a.height) / (this.trickH - this.barHTall);
187192
this.barHScrollTop = Math.min(
188193
Math.max(temp / this.scaleH, 0),
@@ -194,7 +199,10 @@ export default {
194199
}
195200
if (this.realShowW) {
196201
const temp = this.barWScrollLeft * this.scaleW;
197-
this.barWTall = Math.max((a.width / b.width) * this.trickW, 20);
202+
this.barWTall = Math.max(
203+
(a.width / b.width) * this.trickW,
204+
this.minLength > a.width ? 0 : this.minLength
205+
);
198206
this.scaleW = (b.width - a.width) / (this.trickW - this.barWTall);
199207
this.barWScrollLeft = Math.min(
200208
Math.max(temp / this.scaleW, 0),
@@ -361,7 +369,6 @@ export default {
361369
.ohyeah-scroll-vertical-track-h {
362370
position: absolute;
363371
box-sizing: border-box;
364-
// width: auto;
365372
height: 100%;
366373
padding: 2px;
367374
right: 0;
@@ -372,6 +379,10 @@ export default {
372379
&.show {
373380
opacity: 1 !important;
374381
}
382+
&.left {
383+
left: 0;
384+
right: auto;
385+
}
375386
& > div {
376387
border-radius: 999px;
377388
}
@@ -389,6 +400,10 @@ export default {
389400
&.show {
390401
opacity: 1 !important;
391402
}
403+
&.top {
404+
top: 0;
405+
bottom: auto;
406+
}
392407
& > div {
393408
border-radius: 999px;
394409
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /