Skip to content

Commit 3a06143

Browse files
BinaryifyBinaryify
committed
Fixed SSR support error #31 
1 parent e7ede79 commit 3a06143

31 files changed

+690
-1498
lines changed

‎CHANGELOG.MD‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,7 @@
1-
## 1.3.0 | 2020.08.29
1+
## 1.4.0 | 2020.10.05
2+
- Fixed SSR support error
3+
4+
- Need import css now ( import "vue-custom-scrollbar/dist/vueScrollbar.css")
5+
6+
## 1.3.0 | 2020.08.29
27
- Update `perfect-scrollbar` to 1.5.0

‎README.md‎

Lines changed: 74 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,74 @@
1-
# vue-custom-scrollbar
2-
3-
Vue.JS 的简约但完美的自定义滚动条组件(使用了 [utatti/perfect-scrollbar](https://github.com/utatti/perfect-scrollbar),所以如果遇到某些问题,可以查看 `perfect-scrollbar` 仓库)
4-
5-
Minimalistic but perfect custom scrollbar component for Vue.JS(using [utatti/perfect-scrollbar](https://github.com/utatti/perfect-scrollbar), so if you have any question, you also can check the `perfect-scrollbar` repo)
6-
7-
## 为什么要自定义滚动条/Why custom scrollbar
8-
9-
众所周知,谷歌浏览器支持自定义滚动条,但是火狐或其他浏览器不支持,如果你希望你的网站更完美,就用这个组件吧~
10-
11-
As you know, Chrome support custom scrollbar, but Firefox or other browsers don't support it, if you want your website perfect, please use this component~
12-
13-
## 为什么要使用 vue-custom-scrollbar?/Why use vue-custom-scrollbar?
14-
15-
`vue-custom-scrollbar` 是 Vue.JS 的一个简约但完美的自定义滚动条组件
16-
17-
`vue-custom-scrollbar` is minimalistic but perfect scrollbar component for Vue.JS.
18-
19-
- 不改变设计布局 / No change on design layout
20-
- 不需要手动操作 DOM / Don't need manipulate DOM manually
21-
- 使用普通的 `scrollTop` and `scrollLeft` / Use plain `scrollTop` and `scrollLeft`
22-
- 滚动条样式可完全自定义 / Scrollbar style is fully customizable
23-
- 布局更改后更新 / Efficient update on layout change
24-
25-
## 文档/Docs
26-
27-
[Docs](https://binaryify.github.io/vue-custom-scrollbar/)
28-
29-
## 例子/Example
30-
31-
```vue
32-
<template>
33-
<div>
34-
<vue-custom-scrollbar class="scroll-area" :settings="settings" @ps-scroll-y="scrollHanle">
35-
<img src="http://utatti.github.io/perfect-scrollbar/azusa.jpg" height="720" width="1280" alt="">
36-
</vue-custom-scrollbar>
37-
</div>
38-
</template>
39-
<script>
40-
import vueCustomScrollbar from 'vue-custom-scrollbar'
41-
export default {
42-
components: {
43-
vueCustomScrollbar
44-
},
45-
data() {
46-
return {
47-
settings: {
48-
suppressScrollY: false,
49-
suppressScrollX: false,
50-
wheelPropagation: false
51-
}
52-
}
53-
},
54-
methods: {
55-
scrollHanle(evt) {
56-
console.log(evt)
57-
}
58-
}
59-
}
60-
</script>
61-
<style >
62-
.scroll-area {
63-
position: relative;
64-
margin: auto;
65-
width: 600px;
66-
height: 400px;
67-
}
68-
</style>
69-
```
70-
71-
## License
72-
73-
[MIT](https://github.com/Binaryify/vue-custom-scrollbar/blob/master/LICENSE)
1+
# vue-custom-scrollbar
2+
3+
Vue.JS 的简约但完美的自定义滚动条组件(使用了 [utatti/perfect-scrollbar](https://github.com/utatti/perfect-scrollbar),所以如果遇到某些问题,可以查看 `perfect-scrollbar` 仓库)
4+
5+
Minimalistic but perfect custom scrollbar component for Vue.JS(using [utatti/perfect-scrollbar](https://github.com/utatti/perfect-scrollbar), so if you have any question, you also can check the `perfect-scrollbar` repo)
6+
7+
## 为什么要自定义滚动条/Why custom scrollbar
8+
9+
众所周知,谷歌浏览器支持自定义滚动条,但是火狐或其他浏览器不支持,如果你希望你的网站更完美,就用这个组件吧~
10+
11+
As you know, Chrome support custom scrollbar, but Firefox or other browsers don't support it, if you want your website perfect, please use this component~
12+
13+
## 为什么要使用 vue-custom-scrollbar?/Why use vue-custom-scrollbar?
14+
15+
`vue-custom-scrollbar` 是 Vue.JS 的一个简约但完美的自定义滚动条组件
16+
17+
`vue-custom-scrollbar` is minimalistic but perfect scrollbar component for Vue.JS.
18+
19+
- 不改变设计布局 / No change on design layout
20+
- 不需要手动操作 DOM / Don't need manipulate DOM manually
21+
- 使用普通的 `scrollTop` and `scrollLeft` / Use plain `scrollTop` and `scrollLeft`
22+
- 滚动条样式可完全自定义 / Scrollbar style is fully customizable
23+
- 布局更改后更新 / Efficient update on layout change
24+
25+
## 文档/Docs
26+
27+
[Docs](https://binaryify.github.io/vue-custom-scrollbar/)
28+
29+
## 例子/Example
30+
31+
```vue
32+
<template>
33+
<div>
34+
<vue-custom-scrollbar class="scroll-area" :settings="settings" @ps-scroll-y="scrollHanle">
35+
<img src="http://utatti.github.io/perfect-scrollbar/azusa.jpg" height="720" width="1280" alt="">
36+
</vue-custom-scrollbar>
37+
</div>
38+
</template>
39+
<script>
40+
import vueCustomScrollbar from 'vue-custom-scrollbar'
41+
import "vue-custom-scrollbar/dist/vueScrollbar.css"
42+
export default {
43+
components: {
44+
vueCustomScrollbar
45+
},
46+
data() {
47+
return {
48+
settings: {
49+
suppressScrollY: false,
50+
suppressScrollX: false,
51+
wheelPropagation: false
52+
}
53+
}
54+
},
55+
methods: {
56+
scrollHanle(evt) {
57+
console.log(evt)
58+
}
59+
}
60+
}
61+
</script>
62+
<style >
63+
.scroll-area {
64+
position: relative;
65+
margin: auto;
66+
width: 600px;
67+
height: 400px;
68+
}
69+
</style>
70+
```
71+
72+
## License
73+
74+
[MIT](https://github.com/Binaryify/vue-custom-scrollbar/blob/master/LICENSE)

‎dist/demo.html‎

Lines changed: 15 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,19 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
1+
<meta charset="utf-8">
2+
<title>vueScrollbar demo</title>
3+
<script src="https://unpkg.com/vue"></script>
4+
<script src="./vueScrollbar.umd.js"></script>
35

4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>demo</title>
8-
</head>
6+
<link rel="stylesheet" href="./vueScrollbar.css">
97

10-
<body>
11-
<script src="https://unpkg.com/vue"></script>
12-
<script src="https://unpkg.com/vue-custom-scrollbar@1.3.0/dist/vueScrollbar.umd.min.js"></script>
138

9+
<div id="app">
10+
<demo></demo>
11+
</div>
1412

15-
<div id="app">
16-
<demo style="height:500px;width:500px">
17-
<div style="height:1000px;width:1000px;background:green"></div>
18-
</demo>
19-
</div>
20-
21-
<script>
22-
new Vue({
23-
components: {
24-
demo: vueScrollbar
25-
}
26-
}).$mount('#app')
27-
</script>
28-
</body>
29-
30-
</html>
13+
<script>
14+
new Vue({
15+
components: {
16+
demo: vueScrollbar
17+
}
18+
}).$mount('#app')
19+
</script>

0 commit comments

Comments
 (0)