Skip to content
This repository was archived by the owner on Aug 16, 2021. It is now read-only.

Commit d6d5b32

Browse files
author
HarmenM
authored
Initial Scrollerrt.js commit
1 parent 8ea4881 commit d6d5b32

37 files changed

+1704
-2
lines changed

.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
*.idea
2+
typings
3+
node_modules

README.md

+109-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,109 @@
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.

build/typescript/jquery-umd.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
(function (factory) {
2+
if (typeof define === 'function' && define.amd) {
3+
// AMD. Register as an anonymous module.
4+
define(['jquery'], factory);
5+
} else if (typeof module === 'object' && module.exports) {
6+
// Node/CommonJS
7+
module.exports = function( root, jQuery ) {
8+
if ( jQuery === undefined ) {
9+
// require('jQuery') returns a factory that requires window to
10+
// build a jQuery instance, we normalize how we use modules
11+
// that require this pattern but the window provided is a noop
12+
// if it's defined (how jquery works)
13+
if ( typeof window !== 'undefined' ) {
14+
jQuery = require('jquery');
15+
}
16+
else {
17+
jQuery = require('jquery')(root);
18+
}
19+
}
20+
factory(jQuery);
21+
return jQuery;
22+
};
23+
} else {
24+
// Browser globals
25+
factory(jQuery);
26+
}
27+
}(function (jQuery) {
28+
/** {CODE} */
29+
}));

dist/scrollert.css

+85
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)