Version 1.2.0

This commit is contained in:
Rene
2017-12-29 14:05:05 +01:00
parent f16dc19080
commit 2579bb7208
10 changed files with 10669 additions and 4662 deletions
+44 -11
View File
@@ -13,6 +13,7 @@ I've created this plugin because I hate ugly and space consuming scrollbars. Sim
- A simple, powerful and good documented API.
- High browser compatibility (<b>IE8+</b>, <b>Safari6+</b>, <b>Firefox</b>, <b>Opera</b>, <b>Chrome</b> and <b>Edge</b>).
- Usage of the most recent technologies to ensure maximum efficiency and performance on newer browsers.
- Can be used without any dependencies or with jQuery.
- Automatic update detection - after the initialization you don't have to worry about updating.
- Mouse and touch support.
- Textarea support.
@@ -25,20 +26,43 @@ You can find a detailed documentation, demos and theme templates [here](https://
## Dependencies
**Currently this library requires [jQuery](https://jquery.com/) to work.**
The plugin was tested with the jQuery versions: 1.9.1, 2.x, 3.x.
It doesn't work with jQuery slim.
The default plugin version doesn't requires any dependencies!
**If you are using the jQuery dependent version it obviously requires [jQuery](https://jquery.com/) to work.**
It was tested with the jQuery versions: 1.9.1, 2.x, 3.x, and it won't work with jQuery slim.
## Download
#### manually
Download OverlayScrollbars manually from [Releases](https://github.com/KingSora/OverlayScrollbars/releases).
#### npm
OverlayScrollbars can be also downloaded from [npm](https://www.npmjs.com/package/overlayscrollbars).
```
npm install overlayscrollbars
```
## Usage
#### HTML
Include [jQuery](https://jquery.com/) and **OverlayScrollbars** to your HTML file.
Load your CSS file(s) before the JS file(s), to prevent unexpected bugs.
Include **OverlayScrollbars.css** and **OverlayScrollbars.js** to your HTML file.
```html
<!-- Plugin CSS -->
<link type="text/css" href="path/to/jquery.overlayScrollbars.css" rel="stylesheet"/>
<link type="text/css" href="path/to/OverlayScrollbars.css" rel="stylesheet"/>
<!-- Plugin JS -->
<script type="text/javascript" src="path/to/OverlayScrollbars.js"></script>
```
If you are using the jQuery version include [jQuery](https://jquery.com/) before the plugin and use **jquery.overlayScrollbars.js**
```html
<!-- Plugin CSS -->
<link type="text/css" href="path/to/OverlayScrollbars.css" rel="stylesheet"/>
<!-- jQuery JS -->
<script type="text/javascript" src="path/to/jquery.js"></script>
<!-- Plugin JS -->
@@ -49,6 +73,16 @@ Load your CSS file(s) before the JS file(s), to prevent unexpected bugs.
Initialize the plugin after your document has been fully loaded on the desired element.
Default initialization:
```js
$(function() {
//The first argument are the elements to which the plugin shall be initialized
//The second argument has to be at least a empty object or a object with your desired options
OverlayScrollbars(document.querySelectorAll('body'), { });
});
```
jQuery initialization (will only work with the jQuery version):
```js
$(function() {
//The passed argument has to be at least a empty object or a object with your desired options
@@ -465,7 +499,7 @@ instance.destroy();</pre>
</tr>
</thead>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/gmethod-defaultoptions" target="_blank">window.overlayScrollbarsDefaultOptions()</a></b></td>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/gmethod-defaultoptions" target="_blank">OverlayScrollbars.defaultOptions()</a></b></td>
<td>Returns or Sets the default options for each new plugin initialization.</td>
</tr>
<tr>
@@ -473,16 +507,16 @@ instance.destroy();</pre>
example(s):<br>
<pre lang="js">
//get the current defaultOptions
var defaultOptions = window.overlayScrollbarsDefaultOptions();
var defaultOptions = OverlayScrollbars.defaultOptions();
//set new default options
window.overlayScrollbarsDefaultOptions({
OverlayScrollbars.defaultOptions({
className : "my-custom-class",
resize : "both"
});</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/gmethod-getglobals" target="_blank">window.overlayScrollbarsGlobals()</a></b></td>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/gmethod-getglobals" target="_blank">OverlayScrollbars.globals()</a></b></td>
<td>Returns a plain object which contains global information about the plugin and each instance of it.</td>
</tr>
<tr>
@@ -490,7 +524,7 @@ window.overlayScrollbarsDefaultOptions({
example(s):<br>
<pre lang="js">
//get the global information
var globals = window.overlayScrollbarsGlobals();</pre>
var globals = OverlayScrollbars.globals();</pre>
</td>
</tr>
</table>
@@ -498,7 +532,6 @@ var globals = window.overlayScrollbarsGlobals();</pre>
## Future Plans
- Minimize the code as much as possible.
- If desired by the community I'll write and provide a jQuery independent version of the plugin.
- Frequent updates in terms of bugsfixes and enhancements.
## License
@@ -2,11 +2,13 @@
* OverlayScrollbars
* https://github.com/KingSora/OverlayScrollbars
*
* Version: 1.2.0
*
* Copyright KingSora.
* https://github.com/KingSora
*
* Released under the MIT license.
* Date: 09.09.2017
* Date: 29.12.2017
*/
/*
@@ -23,12 +25,10 @@ html.os-html > .os-host {
min-width: 100% !important;
min-height: 100% !important;
margin: 0 !important;
position: absolute !important;
/* could be position: fixed; but it causes issues on iOS (-webkit-overflow-scrolling: touch) */
position: absolute !important; /* could be position: fixed; but it causes issues on iOS (-webkit-overflow-scrolling: touch) */
}
html.os-html > .os-host > .os-padding {
position: absolute;
/* could be position: fixed; but it causes issues on iOS (-webkit-overflow-scrolling: touch) */
position: absolute; /* could be position: fixed; but it causes issues on iOS (-webkit-overflow-scrolling: touch) */
}
body.os-dragging,
body.os-dragging * {
@@ -269,11 +269,8 @@ CUSTOM SCROLLBARS AND CORNER CORE:
transition: opacity 0.3s, visibility 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
html.os-html > .os-host > .os-scrollbar {
position: absolute;
/* could be position: fixed; but it causes issues on iOS (-webkit-overflow-scrolling: touch) */
z-index: 999999;
/* highest z-index of the page */
position: absolute; /* could be position: fixed; but it causes issues on iOS (-webkit-overflow-scrolling: touch) */
z-index: 999999; /* highest z-index of the page */
}
.os-scrollbar,
.os-scrollbar-corner {
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large Load Diff
-11
View File
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large Load Diff
+14
View File
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
+37
View File
@@ -0,0 +1,37 @@
{
"name": "overlayscrollbars",
"version": "1.2.0",
"description": "A javascript scrollbar plugin which hides the native scrollbars and provides custom styleable overlay scrollbars, but keeps the native functionality and feeling.",
"keywords" : [
"overlayscrollbars",
"custom",
"scrollbar",
"scrollbars",
"scroll",
"frontend"
],
"files": [
"js/jquery.overlayScrollbars.js",
"js/jquery.overlayScrollbars.min.js",
"js/OverlayScrollbars.js",
"js/OverlayScrollbars.min.js",
"css/OverlayScrollbars.css",
"css/OverlayScrollbars.min.css",
"README.md",
"LICENSE"
],
"homepage" : "https://kingsora.github.io/OverlayScrollbars",
"repository": {
"type": "git",
"url": "https://github.com/KingSora/OverlayScrollbars"
},
"bugs": {
"url": "https://github.com/KingSora/OverlayScrollbars/issues"
},
"main": "js/OverlayScrollbars.min.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Rene Haas | KingSora",
"license": "MIT"
}