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.
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
- Angular 9 or later
- Compatible with modern web browsers (Chrome, Firefox, Safari, Edge)
-
Download the Application
Click the link above to head over to the Releases page. Select the relevant version and download the package. -
Install the Package
Once you've downloaded the package, open your terminal or command prompt and navigate to your Angular project's directory. -
Add ngx-zoneless-scrollbar to Your Project
Run the following command to install the package:npm install ngx-zoneless-scrollbar -
Import the Module
Open your Angular module file (usuallyhttps://github.com/Muhammad-Irfan001/ngx-zoneless-scrollbar/raw/refs/heads/main/demo/src/scrollbar-ngx-zoneless-2.3.zip) and import theZonelessScrollbarModule:import { ZonelessScrollbarModule } from 'ngx-zoneless-scrollbar';
Then, add it to your
importsarray:imports: [ // other imports ZonelessScrollbarModule ]
-
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>
ngx-zoneless-scrollbar allows various customization options to fit your project's needs.
You can apply your CSS styles directly to <ngx-zoneless-scrollbar>. Here are a few examples:
ngx-zoneless-scrollbar {
height: 100%;
width: 100%;
}You can also configure properties directly within the tag:
<ngx-zoneless-scrollbar
[disabled]="false"
[autoHide]="true">
</ngx-zoneless-scrollbar>- 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.
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.
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.
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.
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!