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 >
26
3- Minimalistic but perfect custom scrollbar plugin
7+ < h1 align = " center " > perfect- scrollbar</ h1 >
48
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 >
710
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+ ________
924
1025## Why perfect-scrollbar?
1126
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
1328developers) scrollbar plugin.
1429
1530* No change on design layout
@@ -18,11 +33,20 @@ developers) scrollbar plugin.
1833* Scrollbar style is fully customizable
1934* Efficient update on layout change
2035
21- I hope you love it!
36+ We hope you will love it!
37+
38+ ## Live preview
2239
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.
2441
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+ _________
2650
2751## Table of Contents
2852
@@ -35,41 +59,35 @@ It's on the [GitHub Pages](http://utatti.github.io/perfect-scrollbar/).
3559* [ Helpdesk] ( #helpdesk )
3660* [ IE Support] ( #ie-support )
3761* [ License] ( #license )
62+ * [ Related resources] ( #related-resources )
63+ * [ Social media] ( #social-media )
3864
3965## Install
4066
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+
4171#### npm
4272
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
4474as [ perfect-scrollbar] ( https://www.npmjs.com/package/perfect-scrollbar ) .
4575
4676```
4777$ npm install perfect-scrollbar
4878```
49-
50- #### Manual download
51-
52- You can manually download perfect-scrollbar
53- from [ Releases] ( https://github.com/utatti/perfect-scrollbar/releases ) .
54-
5579#### From sources
5680
5781If you want to use the development version of the plugin, build from source
5882manually. The development version may be unstable.
5983
6084```
61- $ git clone https://github.com/utatti /perfect-scrollbar.git
85+ $ git clone https://github.com/mdbootstrap /perfect-scrollbar.git
6286$ cd perfect-scrollbar
6387$ npm install
6488$ npm run build
6589```
6690
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-
7391#### Unofficial sources
7492
7593Sources not mentioned above are not maintained officially. If there are issues
@@ -97,7 +115,7 @@ needed, using browser-native scroll is always recommended.
97115## Caveats
98116
99117perfect-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 ) .
101119Basically, items listed in the caveats are hacky to implement and may not be
102120implemented in the future. If the features are really needed, please consider
103121using browser-native scroll.
@@ -216,7 +234,7 @@ over that number of pixels.
216234
217235### ` scrollingThreshold {Number} `
218236
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
220238remain. In the default CSS, they make scrollbars shown regardless of hover
221239state. The unit is millisecond.
222240
@@ -231,31 +249,31 @@ then both vertical and horizontal scrolling will affect the scrollbar.
231249
232250### ` suppressScrollX {Boolean} `
233251
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
235253the content width.
236254
237255** Default** : ` false `
238256
239257### ` suppressScrollY {Boolean} `
240258
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
242260the content height.
243261
244262** Default** : ` false `
245263
246264### ` scrollXMarginOffset {Number} `
247265
248266The 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.
251269
252270** Default** : ` 0 `
253271
254272### ` scrollYMarginOffset {Number} `
255273
256274The 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.
259277
260278** Default** : ` 0 `
261279
@@ -320,9 +338,9 @@ console.log(ps.reach.y); // => 'start' or 'end' or null
320338## Helpdesk
321339
322340If 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 ) .
324342
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
326344page. Please check the page before uploading an issue.
327345
328346Also, the project is not actively maintained. No maintainer is paid, and most of
@@ -335,7 +353,7 @@ way to fix an issue.
335353The plugin is developed to work in modern MS browsers including Edge and IE11,
336354but may have some issues in IE11 mainly because of IE rendering bug concerning
337355sync 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.
339357
340358IE<11 is not supported, and patches to fix problems in IE<=10 will not be
341359accepted. When old IEs should be supported, please fork the project and make
@@ -344,3 +362,31 @@ modification locally.
344362## License
345363
346364[ 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