mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-05-28 23:54:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

version 1.5.0

Browse Source
This commit is contained in:
Rene
2018-06-21 20:54:30 +02:00
parent 4c40e9b671
commit c76eae2843
8 changed files with 1717 additions and 1273 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+65 -4
View File
@@ -20,6 +20,7 @@ I've created this plugin because I hate ugly and space consuming scrollbars. Sim
- Textarea and Body support.
- Direction RTL support. (with normalization)
- Simple and effective scrollbar-styling.
- Sophisticated extension system.
## Demo & Documentation
@@ -37,6 +38,9 @@ It was tested with the jQuery versions: 1.9.1, 2.x, 3.x, and it won't work with
#### manually
Download OverlayScrollbars manually from [Releases](https://github.com/KingSora/OverlayScrollbars/releases).
#### cdn
You can also use OverlayScrollbars via a [cdn](https://cdnjs.com/libraries/overlayscrollbars).
#### npm
OverlayScrollbars can be also downloaded from [npm](https://www.npmjs.com/package/overlayscrollbars).
@@ -76,10 +80,10 @@ Initialize the plugin after your document has been fully loaded.
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'), { });
document.addEventListener("DOMContentLoaded", 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'), { });
});
```
@@ -488,6 +492,45 @@ var pluginState = instance.getState();</pre>
instance.destroy();</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-ext" target="_blank">.ext()</a></b></td>
<td>Returns the instance of a certain extension of the current plugin instance.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//get the instance of the extension "myExtension"
var extensionInstance = instance.ext("myExtension");</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-addext" target="_blank">.addExt()</a></b></td>
<td>Adds a extension to the current instance.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//add the registered extension "myExtension" to the plugin instance
var extensionInstance = instance.addExt("myExtension");</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-removeext" target="_blank">.removeExt()</a></b></td>
<td>Removes a extension from the current instance.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//add the registered extension "myExtension" to the plugin instance
instance.addExt("myExtension");
//remove the added extension "myExtension" from the plugin instance
instance.removeExt("myExtension");</pre>
</td>
</tr>
</table>
#### Global methods:
@@ -528,6 +571,24 @@ OverlayScrollbars.defaultOptions({
var globals = OverlayScrollbars.globals();</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/gmethod-extension" target="_blank">OverlayScrollbars.extension()</a></b></td>
<td>Registers, Unregisters or returns extensions.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//register a dummy extension with the name "myExtension"
OverlayScrollbars.extension("myExtension", function() { return { }; });
//unregister the extension with the name "myExtension"
OverlayScrollbars.extension("myExtension", null);
//get the extension-object with the name "myExtension"
var registeredExtension = OverlayScrollbars.extension("myExtension");
//get all registered extension-objects
var extensionObjects = OverlayScrollbars.extension();</pre>
</td>
</tr>
</table>
## Future Plans
css/OverlayScrollbars.css
+41 -24
View File
@@ -2,13 +2,13 @@
* OverlayScrollbars
* https://github.com/KingSora/OverlayScrollbars
*
* Version: 1.4.5
* Version: 1.5.0
*
* Copyright KingSora.
* https://github.com/KingSora
*
* Released under the MIT license.
* Date: 18.05.2018
* Date: 21.06.2018
*/
/*
@@ -38,6 +38,18 @@ body.os-dragging * {
.os-host-textarea {
position: relative;
overflow: visible !important;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.os-host-flexbox {
overflow: hidden !important;
display: flex;
}
.os-host-flexbox > .os-padding > .os-viewport > .os-content {
display: flex;
}
#hs-dummy-scrollbar-size {
position: fixed;
@@ -117,9 +129,6 @@ body.os-dragging * {
width: 100%;
visibility: visible;
}
.os-host-textarea > .os-padding > .os-content {
overflow: hidden !important;
}
.os-content > .os-textarea {
direction: inherit !important;
float: none !important;
@@ -215,12 +224,14 @@ object.os-resize-observer {
position: relative;
float: left;
max-height: 1px;
margin-top: -1px;
overflow: hidden;
z-index: -1;
padding: 0;
margin: 0;
pointer-events: none;
flex-grow: inherit;
flex-shrink: 0;
flex-basis: 0;
}
.os-size-auto-observer > .os-resize-observer {
width: 1000%;
@@ -362,7 +373,8 @@ html.os-html > .os-host > .os-scrollbar {
top: 0;
bottom: 0;
}
.os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-horizontal {
.os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-horizontal,
.os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-horizontal {
right: 0;
left: 0;
}
@@ -467,29 +479,34 @@ THEMES:
.os-theme-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
min-height: 30px;
}
.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
border-radius: 11px;
opacity: .4;
}
.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
background: #000;
}
.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
background: #fff;
}
.os-theme-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
.os-theme-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
.os-theme-dark > .os-scrollbar > .os-scrollbar-track,
.os-theme-light > .os-scrollbar > .os-scrollbar-track {
border-radius: 10px;
}
.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
background: rgba(0, 0, 0, 0.4);
}
.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
background: rgba(255, 255, 255, 0.4);
}
.os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
background: rgba(0, 0, 0, .55);
}
.os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle,
.os-theme-light > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
opacity: .55;
background: rgba(255, 255, 255, .55);
}
.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
background: rgba(0, 0, 0, .7);
}
.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active,
.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
opacity: .7;
background: rgba(255, 255, 255, .7);
}
.os-theme-dark > .os-scrollbar-horizontal .os-scrollbar-handle:before,
.os-theme-dark > .os-scrollbar-vertical .os-scrollbar-handle:before,
css/OverlayScrollbars.min.css
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
js/OverlayScrollbars.js
+842 -652
View File
File diff suppressed because it is too large Load Diff
js/OverlayScrollbars.min.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
js/jquery.overlayScrollbars.js
+759 -583
View File
File diff suppressed because it is too large Load Diff
js/jquery.overlayScrollbars.min.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "overlayscrollbars",
"version": "1.4.5",
"version": "1.5.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",