mirror of
https://github.com/tenrok/OverlayScrollbars.git
synced 2026-05-17 05:49:39 +03:00
finishing touches
This commit is contained in:
Rene Haas
@@ -18,8 +18,6 @@
|
||||
|
||||
> OverlayScrollbars is a javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.
|
||||
|
||||
> This is the documentation for version `2.x`. which is currently in beta. You can read the version `1.x` docs [here](https://github.com/KingSora/OverlayScrollbars/tree/v1.x) or on the [website](https://kingsora.github.io/OverlayScrollbars/#!overview).
|
||||
|
||||
## Why
|
||||
|
||||
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.
|
||||
@@ -39,7 +37,7 @@ I created this plugin because I hate ugly and space consuming scrollbars. Simila
|
||||
- Highly customizable
|
||||
- TypeScript support - fully written in TypeScript
|
||||
- Dependency free - 100% self written to ensure small size and best functionality
|
||||
- High quality and fully typed Framework versions for `react`, `vue`, `angular`, `svelte` and `solid`.
|
||||
- High quality and fully typed Framework versions for [`react`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react), [`vue`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue), [`angular`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx), [`svelte`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte) and [`solid`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid).
|
||||
|
||||
## Choose your framework
|
||||
|
||||
|
||||
@@ -18,8 +18,6 @@
|
||||
|
||||
> OverlayScrollbars is a javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.
|
||||
|
||||
> This is the documentation for version `2.x`. which is currently in beta. You can read the version `1.x` docs [here](https://github.com/KingSora/OverlayScrollbars/tree/v1.x) or on the [website](https://kingsora.github.io/OverlayScrollbars/#!overview).
|
||||
|
||||
## Why
|
||||
|
||||
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.
|
||||
@@ -39,7 +37,7 @@ I created this plugin because I hate ugly and space consuming scrollbars. Simila
|
||||
- Highly customizable
|
||||
- TypeScript support - fully written in TypeScript
|
||||
- Dependency free - 100% self written to ensure small size and best functionality
|
||||
- High quality and fully typed Framework versions for `react`, `vue`, `angular`, `svelte` and `solid`.
|
||||
- High quality and fully typed Framework versions for [`react`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react), [`vue`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue), [`angular`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx), [`svelte`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte) and [`solid`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid).
|
||||
|
||||
## Choose your framework
|
||||
|
||||
|
||||
@@ -17,22 +17,18 @@ I created this plugin because I hate ugly and space consuming scrollbars. Simila
|
||||
- Highly customizable
|
||||
- TypeScript support - fully written in TypeScript
|
||||
- Dependency free - 100% self written to ensure small size and best functionality
|
||||
- High quality and fully typed Framework versions for `react`, `vue` and `angular`
|
||||
- High quality and fully typed Framework versions for [`react`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react), [`vue`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue), [`angular`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx), [`svelte`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte) and [`solid`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid).
|
||||
|
||||
## Choose your framework
|
||||
|
||||
Additionally to the vanilla JavaScript version you can use the official framework components & utilities:
|
||||
|
||||
<div className="flex not-prose">
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react">
|
||||
<img src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg" width="80" height="80" alt="React" className="h-[80px] mx-1" />
|
||||
</a>
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue">
|
||||
<img src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg" width="80" height="80" alt="Vue" className="h-[80px] mx-1" />
|
||||
</a>
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx">
|
||||
<img src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg" width="80" height="80" alt="Angular" className="h-[80px] mx-1" />
|
||||
</a>
|
||||
<div className="flex">
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react"><img className="h-[80px] mx-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg" width="80" height="80" alt="React" /></a>
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue"><img className="h-[80px] mx-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg" width="80" height="80" alt="Vue" /></a>
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx"><img className="h-[80px] mx-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg" width="80" height="80" alt="Angular" /></a>
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte"><img className="h-[80px] mx-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg" width="80" height="80" alt="Svelte" /></a>
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid"><img className="h-[80px] mx-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg" width="80" height="80" alt="Solid" /></a>
|
||||
</div>
|
||||
|
||||
## Getting started
|
||||
@@ -89,7 +85,7 @@ 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=""` 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 (and `html` element if the target element is `body`).
|
||||
|
||||
### Initialization with an Object
|
||||
<details>
|
||||
|
||||
Reference in New Issue
Block a user