1
- # perfect-scrollbar
1
+ <p align =" center " >
2
+ <a href =" https://mdbootstrap.com/docs/jquery/getting-started/download/?utm_source=GitHub&utm_medium=PerfectScrollbar " >
3
+ <img src="https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-r.png">
4
+ </a >
5
+ </p >
2
6
3
- Minimalistic but perfect custom scrollbar plugin
7
+ < h1 align = " center " > perfect- scrollbar</ h1 >
4
8
5
- [ ![ npm] ( https://img.shields.io/npm/v/perfect-scrollbar.svg )] ( https://www.npmjs.com/package/perfect-scrollbar )
6
- [ ![ Travis CI] ( https://travis-ci.org/utatti/perfect-scrollbar.svg?branch=master )] ( https://travis-ci.org/utatti/perfect-scrollbar )
9
+ <p align =" center " >Minimalistic but perfect custom scrollbar plugin<p >
7
10
8
- *** To read documentation for versions < 1.0, please visit [ ` v0.8.1 ` ] ( https://github.com/utatti/perfect-scrollbar/tree/0.8.1 ) .***
11
+
12
+ <p align =" center " >
13
+ <a href =" https://npmcharts.com/compare/perfect-scrollbar?minimal=true " ><img src =" https://img.shields.io/npm/dm/perfect-scrollbar.svg " alt =" Downloads " ></a >
14
+ <a href =" https://github.com/mdbootstrap/bootstrap-material-design/blob/master/License.pdf " ><img src =" https://img.shields.io/badge/license-MIT-green.svg " alt =" License " ></a >
15
+ <a href =" https://badge.fury.io/js/perfect-scrollbar " ><img src =" https://badge.fury.io/js/perfect-scrollbar.svg " alt =" npm " ></a >
16
+ <a href =" https://twitter.com/intent/tweet/?text=Thanks+@mdbootstrap+for+maintaining+amazing+and+free+Perfect+Scrollbar+Plugin%20https://mdbootstrap.com/freebies/perfect-scrollbar/&hashtags=javascript,code,webdesign,github " ><img src =" https://img.shields.io/twitter/url/http/shields.io.svg?style=social " ></a >
17
+ </p >
18
+
19
+ ## [ Official documentation] ( https://mdbootstrap.com/freebies/perfect-scrollbar/?utm_source=GitHub&utm_medium=PerfectScrollbar )
20
+ *** The official documentation can be found [ here] ( https://mdbootstrap.com/freebies/perfect-scrollbar/?utm_source=GitHub&utm_medium=PerfectScrollbar ) .***
21
+ *** To read documentation for versions < 1.0, please visit [ ` v0.8.1 ` ] ( https://github.com/mdbootstrap/perfect-scrollbar/tree/0.8.1 ) .***
22
+
23
+ ________
9
24
10
25
## Why perfect-scrollbar?
11
26
12
- perfect-scrollbar is minimalistic but * perfect* (for me , and maybe for most
27
+ perfect-scrollbar is minimalistic but * perfect* (for us , and maybe for most
13
28
developers) scrollbar plugin.
14
29
15
30
* No change on design layout
@@ -18,11 +33,20 @@ developers) scrollbar plugin.
18
33
* Scrollbar style is fully customizable
19
34
* Efficient update on layout change
20
35
21
- I hope you love it!
36
+ We hope you will love it!
37
+
38
+ ## Live preview
22
39
23
- ## Demo
40
+ Check out the [ Live Preview ] ( https://mdbootstrap.com/snippets/jquery/filipkapusta/765760/?utm_source=GitHub&utm_medium=PerfectScrollbar ) snippet. You can fork it right away for testing and experimenting purposes.
24
41
25
- It's on the [ GitHub Pages] ( http://utatti.github.io/perfect-scrollbar/ ) .
42
+ ## More useful plugins
43
+
44
+ *** You'll find some example plugins below, you can explore all of them [ here] ( https://mdbootstrap.com/plugins/jquery/?utm_source=GitHub&utm_medium=PerfectScrollbar ) ***
45
+
46
+ [ Datatable Plugin] ( https://mdbootstrap.com/docs/jquery/tables/datatables/?utm_source=GitHub&utm_medium=PerfectScrollbar ) | [ Treeview Plugin] ( https://mdbootstrap.com/plugins/jquery/treeview/?utm_source=GitHub&utm_medium=PerfectScrollbar ) | [ Filter Plugin] ( https://mdbootstrap.com/plugins/jquery/filter/?utm_source=GitHub&utm_medium=PerfectScrollbar )
47
+ ------------ | ------------- | -------------
48
+ <a href =" https://mdbootstrap.com/docs/jquery/tables/datatables/?utm_source=GitHub&utm_medium=PerfectScrollbar " ><img src =" https://mdbootstrap.com/img/Marketing/products/jquery/plugins/datatable.jpg " alt =" Filter Plugin " ></a > | <a href =" https://mdbootstrap.com/plugins/jquery/treeview/?utm_source=GitHub&utm_medium=PerfectScrollbar " ><img src =" https://mdbootstrap.com/img/Marketing/products/jquery/plugins/treeview.jpg " alt =" Filter Plugin " ></a > | <a href =" https://mdbootstrap.com/plugins/jquery/filter/?utm_source=GitHub&utm_medium=PerfectScrollbar " ><img src =" https://mdbootstrap.com/img/Marketing/products/jquery/plugins/filter.jpg " alt =" Filter Plugin " ></a >
49
+ _________
26
50
27
51
## Table of Contents
28
52
@@ -35,41 +59,35 @@ It's on the [GitHub Pages](http://utatti.github.io/perfect-scrollbar/).
35
59
* [ Helpdesk] ( #helpdesk )
36
60
* [ IE Support] ( #ie-support )
37
61
* [ License] ( #license )
62
+ * [ Related resources] ( #related-resources )
63
+ * [ Social media] ( #social-media )
38
64
39
65
## Install
40
66
67
+ #### Download now
68
+
69
+ You can manually download perfect-scrollbar [ here] ( https://mdbootstrap.com/freebies/perfect-scrollbar/?utm_source=GitHub&utm_medium=PerfectScrollbar ) .
70
+
41
71
#### npm
42
72
43
- The best way to install and use perfect-scrollbar is with npm. It's registered
73
+ You can install and use perfect-scrollbar with npm. It's registered
44
74
as [ perfect-scrollbar] ( https://www.npmjs.com/package/perfect-scrollbar ) .
45
75
46
76
```
47
77
$ npm install perfect-scrollbar
48
78
```
49
-
50
- #### Manual download
51
-
52
- You can manually download perfect-scrollbar
53
- from [ Releases] ( https://github.com/utatti/perfect-scrollbar/releases ) .
54
-
55
79
#### From sources
56
80
57
81
If you want to use the development version of the plugin, build from source
58
82
manually. The development version may be unstable.
59
83
60
84
```
61
- $ git clone https://github.com/utatti /perfect-scrollbar.git
85
+ $ git clone https://github.com/mdbootstrap /perfect-scrollbar.git
62
86
$ cd perfect-scrollbar
63
87
$ npm install
64
88
$ npm run build
65
89
```
66
90
67
- #### JSFiddle
68
-
69
- You can fork the following JSFiddles for testing and experimenting purposes:
70
-
71
- * [ perfect-scrollbar JSFiddle] ( https://jsfiddle.net/utatti/dyvL31r6/ )
72
-
73
91
#### Unofficial sources
74
92
75
93
Sources not mentioned above are not maintained officially. If there are issues
@@ -97,7 +115,7 @@ needed, using browser-native scroll is always recommended.
97
115
## Caveats
98
116
99
117
perfect-scrollbar emulates some scrolls, but not all of the kinds. It also * does not* work
100
- in some situations. You can find these cases in [ Caveats] ( https://github.com/utatti /perfect-scrollbar/wiki/Caveats ) .
118
+ in some situations. You can find these cases in [ Caveats] ( https://github.com/mdbootstrap /perfect-scrollbar/wiki/Caveats ) .
101
119
Basically, items listed in the caveats are hacky to implement and may not be
102
120
implemented in the future. If the features are really needed, please consider
103
121
using browser-native scroll.
@@ -216,7 +234,7 @@ over that number of pixels.
216
234
217
235
### ` scrollingThreshold {Number} `
218
236
219
- This sets threashold for ` ps--scrolling-x ` and ` ps--scrolling-y ` classes to
237
+ This sets threshold for ` ps--scrolling-x ` and ` ps--scrolling-y ` classes to
220
238
remain. In the default CSS, they make scrollbars shown regardless of hover
221
239
state. The unit is millisecond.
222
240
@@ -231,31 +249,31 @@ then both vertical and horizontal scrolling will affect the scrollbar.
231
249
232
250
### ` suppressScrollX {Boolean} `
233
251
234
- When set to true, the scroll bar in X axis will not be available, regardless of
252
+ When set to true, the scrollbar in X- axis will not be available, regardless of
235
253
the content width.
236
254
237
255
** Default** : ` false `
238
256
239
257
### ` suppressScrollY {Boolean} `
240
258
241
- When set to true, the scroll bar in Y axis will not be available, regardless of
259
+ When set to true, the scroll bar in Y- axis will not be available, regardless of
242
260
the content height.
243
261
244
262
** Default** : ` false `
245
263
246
264
### ` scrollXMarginOffset {Number} `
247
265
248
266
The number of pixels the content width can surpass the container width without
249
- enabling the X axis scroll bar. Allows some "wiggle room" or "offset break", so
250
- that X axis scroll bar is not enabled just because of a few pixels.
267
+ enabling the X- axis scroll bar. Allows some "wiggle room" or "offset break", so
268
+ that X- axis scroll bar is not enabled just because of a few pixels.
251
269
252
270
** Default** : ` 0 `
253
271
254
272
### ` scrollYMarginOffset {Number} `
255
273
256
274
The number of pixels the content height can surpass the container height without
257
- enabling the Y axis scroll bar. Allows some "wiggle room" or "offset break", so
258
- that Y axis scroll bar is not enabled just because of a few pixels.
275
+ enabling the Y- axis scroll bar. Allows some "wiggle room" or "offset break", so
276
+ that Y- axis scroll bar is not enabled just because of a few pixels.
259
277
260
278
** Default** : ` 0 `
261
279
@@ -320,9 +338,9 @@ console.log(ps.reach.y); // => 'start' or 'end' or null
320
338
## Helpdesk
321
339
322
340
If you have any idea to improve this project or any problem using this, please
323
- feel free to upload an [ issue] ( https://github.com/utatti /perfect-scrollbar/issues ) .
341
+ feel free to upload an [ issue] ( https://github.com/mdbootstrap /perfect-scrollbar/issues ) .
324
342
325
- For common problems, there is a [ FAQ] ( https://github.com/utatti /perfect-scrollbar/wiki/FAQ ) wiki
343
+ For common problems, there is a [ FAQ] ( https://github.com/mdbootstrap /perfect-scrollbar/wiki/FAQ ) wiki
326
344
page. Please check the page before uploading an issue.
327
345
328
346
Also, the project is not actively maintained. No maintainer is paid, and most of
@@ -335,7 +353,7 @@ way to fix an issue.
335
353
The plugin is developed to work in modern MS browsers including Edge and IE11,
336
354
but may have some issues in IE11 mainly because of IE rendering bug concerning
337
355
sync update on scroll properties. The problem is mentioned in
338
- [ Caveats] ( https://github.com/utatti /perfect-scrollbar/wiki/Caveats ) too.
356
+ [ Caveats] ( https://github.com/mdbootstrap /perfect-scrollbar/wiki/Caveats ) too.
339
357
340
358
IE<11 is not supported, and patches to fix problems in IE<=10 will not be
341
359
accepted. When old IEs should be supported, please fork the project and make
@@ -344,3 +362,31 @@ modification locally.
344
362
## License
345
363
346
364
[ MIT] ( LICENSE )
365
+
366
+ ## Related resources
367
+
368
+ - [ Material Scrollbar] ( https://mdbootstrap.com/docs/jquery/javascript/scroll/?utm_source=GitHub&utm_medium=PerfectScrollbar )
369
+
370
+ - [ Table scroll] ( https://mdbootstrap.com/docs/jquery/tables/scroll/?utm_source=GitHub&utm_medium=PerfectScrollbar )
371
+
372
+ - [ Full screen scroller] ( https://mdbootstrap.com/plugins/jquery/screen-scroller/?utm_source=GitHub&utm_medium=PerfectScrollbar )
373
+
374
+ - [ Scrollspy] ( https://mdbootstrap.com/docs/jquery/navigation/scrollspy/?utm_source=GitHub&utm_medium=PerfectScrollbar )
375
+
376
+ ## Social Media
377
+
378
+ - [ Twitter] ( https://twitter.com/MDBootstrap )
379
+
380
+ - [ Facebook] ( https://www.facebook.com/mdbootstrap )
381
+
382
+ - [ Pinterest] ( https://pl.pinterest.com/mdbootstrap )
383
+
384
+ - [ Dribbble] ( https://dribbble.com/mdbootstrap )
385
+
386
+ - [ LinkedIn] ( https://www.linkedin.com/company/material-design-for-bootstrap )
387
+
388
+ - [ YouTube] ( https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA )
389
+
390
+ ## MDB PRO
391
+
392
+ - [ Material Design for Bootstrap PRO] ( https://mdbootstrap.com/products/jquery-ui-kit/?utm_source=GitHub&utm_medium=PerfectScrollbar )
0 commit comments