Custom Overlay Scrollbars with Native Scrolling

Custom overlay scrollbars with Angular’s native scrolling mechanism, and provide seamless scrolling guidance across browsers.

ngx scrollbar, angular custom scrollbar, custom scrollbar angular material, ngx perfect scrollbar, ng scrollbar is not a known element, angular scrollbar

Features

Super easy to use
Native scrolling mechanism
Highly customizable
Smooth scroll
Reached events
Resize sensor
Easy integration
Mobile support
RTL support
Universal support
Ivy engine support
Auto-height
Auto-width

How to make use of it:

Installation:

# Yarn
$ yarn add ngx-scrollbar

# NPM
$ npm install ngx-scrollbar --save

1. Import the ngx-scrollbar into your module.

import { ScrollbarModule } from 'ngx-scrollbar';

2. The markup.

<ng-scrollbar class="sample">
  <div class="inner">
    <b>Lorem ipsum dolor sit amet</b>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet mollitia vero quam, nisi possimus dolorem
      asperiores, molestiae sit voluptatibus alias consequuntur laudantium repellat ea quidem quaerat rerum
      perspiciatis iste adipisci.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda earum facilis sed nihil numquam at
      accusamus eum error eaque alias hic sint rem consequatur impedit tempore, dolor, quos, quae esse?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore maiores maxime corrupti quisquam.
      Dignissimos sunt error voluptatibus repellat consequatur illo, aliquid nihil maxime veniam repudiandae,
      provident et sit, reiciendis dicta.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae id amet deserunt voluptate maiores
      sunt
      aut eligendi totam nesciunt magnam illo consectetur aspernatur at voluptatem, qui unde ullam omnis
      voluptates.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id assumenda et fugiat placeat enim quas,
      voluptas
      odio aperiam in quibusdam beatae eaque minima. Consequuntur pariatur, doloremque, odit dolorem ullam
      sunt!</p>
  </div>
</ng-scrollbar>