@mr-scroll/angular

The best custom scroll for the web.

This is the angular wrapper. Check here (root of this repo) for an overview on mr-scroll.

Install

npm i @mr-scroll/core @mr-scroll/angular

Angular 10 and above is supported.

Note: If you're using css-theming, check the css-theming support package.

Usage

Import the global CSS styles in your angular.json, in projects>angular>architect>build>options>styles:

"styles": [
  "node_modules/@mr-scroll/core/dist/styles.css",
  //...
]

Example from sample here.

Import ScrollModule into your module.

Example from sample here.

Use mr-scroll component:

<mr-scroll>
  Content
</mr-scroll>

For more general usage info check the README in the root of this repo.

NOTE: The scrolled event is the only event that won't trigger change detection. This is by design as it's fired a lot. If you need change detection when you react to it, you can do this easily by using NgZone:

// Inject NgZone in your component.
constructor(private _zone: NgZone) { }

_onScrolled() {
  _zone.Run(() => {
    // Handle the event.
  });
}