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

improve documentation

Browse Source
This commit is contained in:
Rene Haas
2023-03-27 18:43:44 +02:00
parent cdb4686d04
commit 15fc78009f
4 changed files with 45 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+16 -3
View File
@@ -22,13 +22,13 @@
I created this plugin because I hate ugly and space consuming scrollbars. Similar plugins haven't met my requirements in terms of features, quality, simplicity, license or browser support.
## Goals & Features.es6
## Goals & Features
- Simple, powerful and well documented API
- High browser compatibility - **Firefox 59+**, **Chrome 55+**, **Opera 42+**, **Edge 12+**, **Safari 10+** and **IE 11**
- Can be run on the server - **SSR**, **SSG** and **ISR** support
- Tested on various devices - **Mobile**, **Desktop** and **Tablet**
- Tested with various (and mixed) inputs - **Mouse**, **touch** and **pen**
- Tested with various (and mixed) inputs - **Mouse**, **Touch** and **Pen**
- **Treeshaking** - bundle only what you really need
- Automatic update detection - **no polling**
- Usage of latest browser features - best **performance** in new browsers
@@ -115,7 +115,20 @@ const osInstance = OverlayScrollbars(document.querySelector('#myElement'), {});
If you initialize OverlayScrollbars it needs a few milliseconds to create and append all the elements to the DOM.
While this period the native scrollbars are still visible and are switched out after the initialization is finished. This is perceived as flickering.
To fix this behavior apply the `data-overlayscrollbars-initialize` attribute to the target element (and `html` element if the target element is `body`).
To fix this behavior apply the `data-overlayscrollbars-initialize` attribute to the target element (or `html` element if the target element is `body`).
```html
<!-- for the body element -->
<html data-overlayscrollbars-initialize>
<head></head>
<body data-overlayscrollbars-initialize></body>
</html>
<!-- for all other elements -->
<div data-overlayscrollbars-initialize>
OverlayScrollbars is applied to this div
</div>
```
### Initialization with an Object
<details>
packages/overlayscrollbars/CHANGELOG.md
+12 -1
View File
@@ -1,5 +1,16 @@
# Changelog
## 2.1.1
### Bug Fixes
- Fixed a bug where pointer events weren't released properly after drag or click scrolling. [#512](https://github.com/KingSora/OverlayScrollbars/issues/512)
### Improvements
- The `os-theme-dark` and `os-theme-light` themes now use `border-box` box-sizing as their default.
- Improve the `README.md` documentation for initialization, styling and and the browser global version. [#509](https://github.com/KingSora/OverlayScrollbars/issues/509)
## 2.1.0
### Bug Fixes
@@ -8,7 +19,7 @@
### Features
- Introduce `CSS Custom Properties` to improve theming and styling of scrollbars.
- Introduce `CSS Custom Properties` to improve theming and styling of scrollbars. [#478](https://github.com/KingSora/OverlayScrollbars/issues/478)
### Improvements
packages/overlayscrollbars/README.md
+16 -3
View File
@@ -22,13 +22,13 @@
I created this plugin because I hate ugly and space consuming scrollbars. Similar plugins haven't met my requirements in terms of features, quality, simplicity, license or browser support.
## Goals & Features.es6
## Goals & Features
- Simple, powerful and well documented API
- High browser compatibility - **Firefox 59+**, **Chrome 55+**, **Opera 42+**, **Edge 12+**, **Safari 10+** and **IE 11**
- Can be run on the server - **SSR**, **SSG** and **ISR** support
- Tested on various devices - **Mobile**, **Desktop** and **Tablet**
- Tested with various (and mixed) inputs - **Mouse**, **touch** and **pen**
- Tested with various (and mixed) inputs - **Mouse**, **Touch** and **Pen**
- **Treeshaking** - bundle only what you really need
- Automatic update detection - **no polling**
- Usage of latest browser features - best **performance** in new browsers
@@ -115,7 +115,20 @@ const osInstance = OverlayScrollbars(document.querySelector('#myElement'), {});
If you initialize OverlayScrollbars it needs a few milliseconds to create and append all the elements to the DOM.
While this period the native scrollbars are still visible and are switched out after the initialization is finished. This is perceived as flickering.
To fix this behavior apply the `data-overlayscrollbars-initialize` attribute to the target element (and `html` element if the target element is `body`).
To fix this behavior apply the `data-overlayscrollbars-initialize` attribute to the target element (or `html` element if the target element is `body`).
```html
<!-- for the body element -->
<html data-overlayscrollbars-initialize>
<head></head>
<body data-overlayscrollbars-initialize></body>
</html>
<!-- for all other elements -->
<div data-overlayscrollbars-initialize>
OverlayScrollbars is applied to this div
</div>
```
### Initialization with an Object
<details>
packages/overlayscrollbars/package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "overlayscrollbars",
"private": true,
"version": "2.1.0",
"version": "2.1.1",
"description": "A scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.",
"author": "Rene Haas | KingSora",
"license": "MIT",