Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omnedia/ngx-scrollbar
A simple component library to create a custom scrollbar.
https://github.com/omnedia/ngx-scrollbar
Last synced: about 2 months ago
JSON representation
A simple component library to create a custom scrollbar.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-scrollbar
- Owner: omnedia
- License: mit
- Created: 2024-08-25T17:04:52.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-08-25T20:08:29.000Z (5 months ago)
- Last Synced: 2024-10-31T21:04:38.456Z (3 months ago)
- Language: TypeScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - @omnedia/ngx-scrollbar (⭐0) - This component offers a custom scrollbar with smooth scrolling functionality and allows for full control over its appearance through styling. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - @omnedia/ngx-scrollbar - This component offers a custom scrollbar with smooth scrolling functionality and allows for full control over its appearance through styling. (Table of contents / Third Party Components)
- fucking-awesome-angular - @omnedia/ngx-scrollbar - This component offers a custom scrollbar with smooth scrolling functionality and allows for full control over its appearance through styling. (Table of contents / Third Party Components)
README
# ngx-scrollbar
`@omnedia/ngx-scrollbar` is an Angular library that provides a customizable and lightweight scrollbar component. This component offers a custom scrollbar with smooth scrolling functionality and allows for full control over its appearance through styling.
## Features
- Custom scrollbar for the y-Direction with adjustable styles and behavior.
- Smooth scrolling with click-and-drag functionality.
- Easily integratable into Angular projects as a standalone component.
- Allows for styling customization via CSS classes and inline styles.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-scrollbar
```
## Usage
Import the `NgxScrollbarComponent` in your Angular module or component:
```typescript
import { NgxScrollbarComponent } from '@omnedia/ngx-scrollbar';
@Component({
...
imports: [
...
NgxScrollbarComponent,
],
...
})
```
Use the component in your template:
```html
Scrollable content 1
Scrollable content 2
Scrollable content 3
```
## How It Works
- Custom Scrollbar: The ngx-scrollbar component wraps your content inside a custom scrollbar container. The appearance of the scrollbar can be controlled via the styleClass input, allowing for full customization.
- Smooth Scrolling: The scrollbar supports smooth scrolling, and users can drag the scrollbar for precise control.
- Dynamic Calculation: The size of the scrollbar is calculated based on the content height relative to the container.
## API
```html
```
- `styleClass` (optional): A custom CSS class to apply to the scrollbar component for additional styling.
- `onlyShowOnHover` (optional): Sets if the scrollbar is only visible while you hover the content.
## Example
```html
Item 1
Item 2
Item 3
```
This will create a custom scrollbar for the content with the specified custom styles.
## Styling
You can style the component globally or use the styleClass input to apply your custom styles.
Make sure to give the `om-scrollbar` component a height of 100% in your component.
The `max-height` is defined by the components parent component.
## Custom Scrollbar Styling Example
In this example, the scrollbar bar is styled to be larger and colored differently:
```html
```
```css
/* Component styling */
om-scrollbar {
height: 100%;
}
.nav-bar {
height: 500px
}
.nav-items {
display: flex;
flex-direction: column;
gap: 1rem;
font-size: 2rem;
}
/* Global styling */
.custom-scrollbar {
background-color: rgb(60, 60, 60) !important;
width: 0.5rem !important;
border-radius: 12px !important;
transition: background-color 0.2s;
&:hover,
&.om-scrollbar-bar-active {
background-color: rgb(80, 80, 80) !important;
opacity: 1 !important;
}
}
```
## Contributing
Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.
## License
This project is licensed under the MIT License.