|
1 |
| -# scrollert |
2 |
| -Scrollert - Cross browser OSX-like scrollbar jQuery plugin |
| 1 | +# Scrollert.js - a cross browser, OSX-like, light weight scrollbar |
| 2 | +Scrollert.js is a jQuery plugin that implements uniform scrollbars on all browsers, platforms and devices. It has a small memory and DOM footprint in the browser and is fully customizable through CSS. It creates both **horizontal** and **vertical** scrollbars. |
| 3 | + |
| 4 | +Scrollert.js can be loaded as a [UMD module](https://github.com/umdjs/umd) with your Module loader of choice (SystemJS, RequireJS, Webpack etc) or by loading it globally with a `<script>` tag. |
| 5 | + |
| 6 | +Scrollert.js.js is written in Typescript and LESS. |
| 7 | + |
| 8 | +# Support and compatibility |
| 9 | +Scrollert.js is thoroughly field tested and is compatible with: |
| 10 | +- *Chrome* (Windows, OSX, Linux) |
| 11 | +- *Internet Explorer 9+* |
| 12 | +- *Microsoft Edge* |
| 13 | +- *Firefox* (Windows, OSX, Linux) |
| 14 | +- *Opera* (Windows, OSX, Linx) |
| 15 | + |
| 16 | +# Basic usage |
| 17 | +Embed the `scrollert.min.js` and `scrollert.min.css` in your HTML page. |
| 18 | +```html |
| 19 | +<div class="scrollert"> |
| 20 | + <div class="scrollert-content" tabindex="1"> |
| 21 | + {your content here} |
| 22 | + </div> |
| 23 | +</div> |
| 24 | + |
| 25 | +<!-- Somewhere below before body close --> |
| 26 | +<script type="application/javascript"> |
| 27 | + $('.scrollert').scrollert(); |
| 28 | +</script> |
| 29 | +``` |
| 30 | + |
| 31 | +# Advanced usage |
| 32 | +## Options |
| 33 | +It is possible to bootstrap a Scrollert.js instance with the following options: |
| 34 | + |
| 35 | +```javascript |
| 36 | +jQuery('.scrollert').scrollert({ |
| 37 | + axes: ['y'], |
| 38 | + 'preventOuterScroll': true |
| 39 | +}); |
| 40 | +``` |
| 41 | +### axes |
| 42 | +Specify to which axis or axes Scrollert.js must listen. Gives horizontal and/or vertical scrollbars. |
| 43 | + |
| 44 | + |
| 45 | +**Type:** array |
| 46 | + |
| 47 | +**Default:** `['x', 'y']` |
| 48 | + |
| 49 | +### preventOuterScroll |
| 50 | +Prevents scrolling of parent elements while hovering a scrollert pane. |
| 51 | + |
| 52 | +**Type:** boolean |
| 53 | + |
| 54 | +**Default:** `false` |
| 55 | + |
| 56 | +### cssPrefix |
| 57 | +The prefix which is prepended to all css-classes. |
| 58 | + |
| 59 | + |
| 60 | +**Type:** string |
| 61 | + |
| 62 | +**Default:** `scrollert` |
| 63 | + |
| 64 | +### eventNamespace |
| 65 | +The namespace in which all events are added. There is not really a use case to override this, but it is still possible though. |
| 66 | + |
| 67 | + |
| 68 | +**Type:** string |
| 69 | + |
| 70 | +**Default:** `scrollert` |
| 71 | + |
| 72 | +### contentSelector |
| 73 | +Specify a custom content selector. By default the cssPrefix option is used to get the content child out of Scroller's container element. (Default: `.scrollert-content`). If you want to use a custom selector for your content element, you can specify the selector to let Scrollert.js know where to look for the content element. The selector must be a valid `jQuery/sizzle` selector. |
| 74 | + |
| 75 | + |
| 76 | +**Type:** string |
| 77 | + |
| 78 | +**Default:** `null` |
| 79 | + |
| 80 | +## Methods |
| 81 | +The following methods can be called after scrollert is initialized: |
| 82 | + |
| 83 | +### update |
| 84 | +To update the scrollbars. This is necessary when the dimensions of the `content element` are changed due to DOM or changes. |
| 85 | +```javascript |
| 86 | +jQuery('.scrollert').scrollert('update'); |
| 87 | +``` |
| 88 | +### destroy |
| 89 | +To destroy a Scrollert.js instance and revert all changes back to how it was before scrollert was initialized. |
| 90 | +```javascript |
| 91 | +jQuery('.scrollert').scrollert('destroy'); |
| 92 | +``` |
| 93 | + |
| 94 | +## Events |
| 95 | +Not implemented yet. |
| 96 | + |
| 97 | +# FAQ |
| 98 | +<sup>frequently asked and less frequently asked, but still answered:</sup> |
| 99 | +## How do I customize Scrollert.js? |
| 100 | +You can customize the looks of Scrollert.js by styling it using CSS. |
| 101 | + |
| 102 | +## Why must I specify a tabindex on the content element? |
| 103 | +Good question. I forgot while developing. There really is a reason for that. When it comes to mind, I will update this question |
| 104 | + |
| 105 | +## Why is this plugin created? There are already so many javascript scrollbar plugins |
| 106 | +Syslogic is the maker of Scienta. The majority of our customers uses Windows. There was only one problem. Although we like windows, we are not quite fond of the default Windows scrollbar, especially not when used in an inline panel. To provide our customers with a beautiful and uniform scrolling experience, we searched for a scrollbar solution. We couldn't find one that suited our needs. So we decided to build one ourselfs. |
| 107 | + |
| 108 | + # Build it yourself |
| 109 | + You don't have to stick to the shipped build. Why not build it yourself? You can run `npm install` and `gulp build` to create a customized build. |
0 commit comments