repository·master·Indexed 26 days ago
https://github.com/kingsora/overlayscrollbarsA library providing highly customizable, cross-browser scrollbars that replace native browser scrollbars with a consistent, stylable implementation. Includes the core vanilla JavaScript library and official wrappers for Angular (overlayscrollbars-ngx), React (overlayscrollbars-react), SolidJS (overlayscrollbars-solid), Svelte (overlayscrollbars-svelte), and Vue (overlayscrollbars-vue).
To use the official Vue wrapper, install overlayscrollbars-vue. You must also install the vanilla overlayscrollbars library and vue as peer dependencies.
npm install overlayscrollbars-vue
npm install overlayscrollbars
npm install vueTo prevent the brief moment where native scrollbars are visible before OverlayScrollbars initializes, add the data-overlayscrollbars-initialize attribute to your target element. If initializing the body, add the attribute to both the html and body elements.
<!-- 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>You can use OverlayScrollbars without a bundler by downloading files from a Release or using a CDN.
.browser files for general use..es5 for older browser support, otherwise use .es6..min files for production.Access the API via the global OverlayScrollbarsGlobal object.
<link type="text/css" href="path/to/overlayscrollbars.css" rel="stylesheet" />
<script type="text/javascript" src="path/to/overlayscrollbars.browser.es.js" defer></script>var {
OverlayScrollbars,
ScrollbarsHidingPlugin,
SizeObserverPlugin,
ClickScrollPlugin
} = OverlayScrollbarsGlobal;To use OverlayScrollbars in an Angular project, you must install the wrapper package and its required peer dependencies.
Install the Angular wrapper:
npm install overlayscrollbars-ngx
Install the core vanilla JavaScript library:
npm install overlayscrollbars
Ensure @angular/core and @angular/common are available in your project.
npm install overlayscrollbars-ngx
npm install overlayscrollbarsYou can control the size of the scrollbar handle by applying CSS min-width, max-width, min-height, or max-height to the handle classes.
Note: Do not use the width or height properties, as these are managed automatically by the plugin. To force a constant handle size, set both the minimum and maximum properties to the same value.
.os-scrollbar-horizontal .os-scrollbar-handle.os-scrollbar-vertical .os-scrollbar-handle/* horizontal boundaries */
.os-scrollbar-horizontal .os-scrollbar-handle {
min-width: 50px;
max-width: 200px;
}
/* vertical boundaries */
.os-scrollbar-vertical .os-scrollbar-handle {
min-height: 40px;
max-height: 40px;
}Before using the components, you must import the OverlayScrollbars CSS file into your application.
Try this path first:
import 'overlayscrollbars/overlayscrollbars.css';If the path above does not work, use the alternative path:
import 'overlayscrollbars/styles/overlayscrollbars.css';OverlayScrollbars includes two default themes: os-theme-dark and os-theme-light. You can apply these by setting the scrollbars.theme option during initialization.
OverlayScrollbars(document.body, {
scrollbars: {
theme: 'os-theme-dark'
}
});To use OverlayScrollbars in a React project, you must install both the React wrapper and the core vanilla JavaScript library. Ensure you also have react installed in your project.
npm install overlayscrollbars-reactnpm install overlayscrollbarsnpm install overlayscrollbars-react
npm install overlayscrollbarsImport OverlayscrollbarsModule into your Angular module (e.g., AppModule) to enable the component and directive.
import { NgModule } from "@angular/core";
import { OverlayscrollbarsModule } from "overlayscrollbars-ngx";
@NgModule({
imports: [OverlayscrollbarsModule],
})
export class AppModule {}Install the overlayscrollbars package using your preferred package manager. Once installed, you can import the core library, plugins, and the required CSS file.
```sh
npm install overlayscrollbarsimport 'overlayscrollbars/overlayscrollbars.css';
import {
OverlayScrollbars,
ScrollbarsHidingPlugin,
SizeObserverPlugin,
ClickScrollPlugin
} from 'overlayscrollbars';Note: If
'overlayscrollbars/overlayscrollbars.css'is not found, try using'overlayscrollbars/styles/overlayscrollbars.css'instead.
To use the Svelte wrapper, install overlayscrollbars-svelte via npm. You must also install the vanilla overlayscrollbars library and svelte as peer dependencies.
npm install overlayscrollbars-svelte
npm install overlayscrollbars
npm install svelteOverlayScrollbars uses a plugin system to keep the core lightweight. Features like scrollbar hiding for older browsers or click-to-scroll are provided via plugins. Plugins must be added using OverlayScrollbars.plugin() before creating instances that require them.
import {
OverlayScrollbars,
ScrollbarsHidingPlugin,
SizeObserverPlugin,
ClickScrollPlugin
} from 'overlayscrollbars';
// Single plugin
OverlayScrollbars.plugin(ScrollbarsHidingPlugin);
// Multiple plugins
OverlayScrollbars.plugin([SizeObserverPlugin, ClickScrollPlugin]);