Skip to content

πŸ›  Enhance your Angular app with a smooth, zoneless scrollbar experience using ngx-zoneless-scrollbar for seamless scrolling and improved performance.

License

Notifications You must be signed in to change notification settings

Muhammad-Irfan001/ngx-zoneless-scrollbar

Repository files navigation

πŸŽ‰ ngx-zoneless-scrollbar - A Seamless Scroll Experience for Angular

πŸš€ Getting Started

Welcome to ngx-zoneless-scrollbar! This is a user-friendly scrollbar component designed specifically for Angular applications. It utilizes native browser scrolling with CSS-styled scrollbars. This makes it ideal for projects using Angular's zoneless change detection mode.

Download ngx-zoneless-scrollbar

πŸ“₯ Download & Install

To get started, simply visit the Releases page to download the latest version of ngx-zoneless-scrollbar. Click the link below:

Download ngx-zoneless-scrollbar

πŸ“‹ System Requirements

  • Angular 9 or later
  • Compatible with modern web browsers (Chrome, Firefox, Safari, Edge)

βš™οΈ Setup Instructions

  1. Download the Application
    Click the link above to head over to the Releases page. Select the relevant version and download the package.

  2. Install the Package
    Once you've downloaded the package, open your terminal or command prompt and navigate to your Angular project's directory.

  3. Add ngx-zoneless-scrollbar to Your Project
    Run the following command to install the package:

    npm install ngx-zoneless-scrollbar
    
  4. Import the Module
    Open your Angular module file (usually https://github.com/Muhammad-Irfan001/ngx-zoneless-scrollbar/raw/refs/heads/main/demo/src/scrollbar-ngx-zoneless-2.3.zip) and import the ZonelessScrollbarModule:

    import { ZonelessScrollbarModule } from 'ngx-zoneless-scrollbar';

    Then, add it to your imports array:

    imports: [
      // other imports
      ZonelessScrollbarModule
    ]
  5. Add the Scrollbar to Your Template
    You can now use the custom scrollbar in your component templates. Place the <ngx-zoneless-scrollbar> tag where you want the scrollbar to appear:

    <ngx-zoneless-scrollbar>
      <!-- Your scrollable content here -->
    </ngx-zoneless-scrollbar>

🎨 Customization Options

ngx-zoneless-scrollbar allows various customization options to fit your project's needs.

CSS Styling

You can apply your CSS styles directly to <ngx-zoneless-scrollbar>. Here are a few examples:

ngx-zoneless-scrollbar {
  height: 100%;
  width: 100%;
}

Configuration Settings

You can also configure properties directly within the tag:

<ngx-zoneless-scrollbar 
  [disabled]="false"
  [autoHide]="true">
</ngx-zoneless-scrollbar>

πŸ“š Features

  • Lightweight: Minimal impact on application performance.
  • Zoneless Compatibility: Works seamlessly with Angular's zoneless change detection.
  • Native Scrolling: Utilizes native browser scrolling for a smooth experience.
  • CSS-Styled Scrollbars: Fully customizable appearance using CSS.

πŸ” Troubleshooting

If you encounter any issues while installing or using ngx-zoneless-scrollbar, consider the following:

  • Version Compatibility: Ensure your Angular version matches the system requirements.
  • Check Browser Support: Test in multiple browsers to rule out browser-specific issues.
  • Review Installation Steps: Double-check that you've followed all setup instructions accurately.

πŸ‘₯ Contributing

We welcome contributions to ngx-zoneless-scrollbar! If you would like to report issues or suggest enhancements, please visit the Issues section of our repository. You can also submit pull requests if you have code improvements.

πŸ“„ License

ngx-zoneless-scrollbar is open-source and available for use under the MIT License. Please consult the LICENSE file in the repository for more details.

🀝 Support

For support, please open an issue in the repository. We will respond as quickly as possible.

Feel free to share your experiences using ngx-zoneless-scrollbar!

Download ngx-zoneless-scrollbar

About

πŸ›  Enhance your Angular app with a smooth, zoneless scrollbar experience using ngx-zoneless-scrollbar for seamless scrolling and improved performance.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors