@omnedia/ngx-scrollbar

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:

npm install @omnedia/ngx-scrollbar

Usage

Import the NgxScrollbarComponent in your Angular module or component:

import { NgxScrollbarComponent } from '@omnedia/ngx-scrollbar';

@Component({
  ...
  imports: [
    ...
    NgxScrollbarComponent,
  ],
  ...
})

Use the component in your template:

<om-scrollbar [styleClass]="'custom-scrollbar'">
  <div>
    <!-- Your scrollable content here -->
    <p>Scrollable content 1</p>
    <p>Scrollable content 2</p>
    <p>Scrollable content 3</p>
  </div>
</om-scrollbar>

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

<om-scrollbar [styleClass]="'your-custom-class'" [onlyShowOnHover]="onlyShowOnHover">
  <ng-content></ng-content>
</om-scrollbar>

• 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

<om-scrollbar [styleClass]="'custom-scrollbar-style'">
  <div>
    <p>Item 1</p>
    <p>Item 2</p>
    <p>Item 3</p>
    <!-- Add more content here -->
  </div>
</om-scrollbar>

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:

<div class="nav-bar">
    <om-scrollbar styleClass="custom-scrollbar">
        <div class="nav-items">
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </div>
    </om-scrollbar>
</div>

/* 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.