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

improve new website

Browse Source
This commit is contained in:
Rene Haas
2022-11-09 14:43:30 +01:00
parent 4a536e934e
commit 4be469f2d7
8 changed files with 464 additions and 9164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/index.mdx
+43 -16
View File
@@ -17,10 +17,27 @@ 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`
## 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>
## Getting started
### npm & Node
### npm & node
OverlayScrollbars can be downloaded from [npm](https://www.npmjs.com/package/overlayscrollbars) or the package manager of your choice:
```sh
npm install overlayscrollbars
@@ -31,6 +48,8 @@ import 'overlayscrollbars/overlayscrollbars.css';
import { OverlayScrollbars } from 'overlayscrollbars';
```
> __Note__: In older node versions use `'overlayscrollbars/styles/overlayscrollbars.css'` as the import path for the CSS file.
### Manual download & embedding
<details>
@@ -362,30 +381,40 @@ Is invoked after the instace was updated.
Is invoked after all generated elements, observers and events were removed from the DOM.
### `scroll`
| arguments | description |
| :--- | :--- |
| `instance` | The instance which invoked the event. |
| `event` | The original `event` argument of the DOM event. |
Is invoked by scrolling the viewport.
</details>
## Instance Methods
## Instance
> __Note__: For now please refer to the <b>TypeScript definitions</b> for a more detailed description.
```ts
interface OverlayScrollbars {
options(): Options;
options(newOptions: DeepPartial<Options>): Options;
options(newOptions: PartialOptions, pure?: boolean): Options;
update(force?: boolean): OverlayScrollbars;
on(eventListeners: EventListeners, pure?: boolean): () => void;
on<N extends keyof EventListenerArgs>(name: N, listener: EventListener<N>): () => void;
on<N extends keyof EventListenerArgs>(name: N, listener: EventListener<N>[]): () => void;
destroy(): void;
off<N extends keyof EventListenerArgs>(name: N, listener: EventListener<N>): void;
off<N extends keyof EventListenerArgs>(name: N, listener: EventListener<N>[]): void;
update(force?: boolean): boolean;
state(): State;
elements(): Elements;
on<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>): () => void;
on<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>[]): () => void;
off<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>): void;
off<N extends keyof EventListenerMap>(name: N, listener: EventListener<N>[]): void;
destroy(): void;
}
```
@@ -396,14 +425,12 @@ interface OverlayScrollbars {
```ts
interface OverlayScrollbarsStatic {
(target: InitializationTarget): OverlayScrollbars | undefined;
(
target: InitializationTarget,
options: DeepPartial<Options>,
eventListeners?: InitialEventListeners
): OverlayScrollbars;
(target: InitializationTarget, options: PartialOptions, eventListeners?: EventListeners): OverlayScrollbars;
plugin(plugin: Plugin | Plugin[]): void;
valid(osInstance: any): boolean;
valid(osInstance: any): osInstance is OverlayScrollbars;
env(): Environment;
}
```