ngx-slight-scroll (latest)

• The CSS scrollbars styling module defines properties that you can use for visual styling of scrollbars. You can customize the width of the scrollbar as required. You can also customize the color of the scrollbar track, which is the background of the scrollbar, and the color of the scrollbar thumb, which is the draggable handle of the scrollbar.

• ngxSlimScroll Add directive to any HTML block element in order to enable scrollbar.

Import Style

• [x] Import using CSS CDN and Add it to your application

<link rel="stylesheet" href="https://cdn.beforepost.com/neptune/ngx-slight-scroll-minified.css">

Add crossorigin attribute as (use-credentials or anonymous) to link element if required.

• [x] Directly add it to your Css / Scss file.

@import url("https://cdn.beforepost.com/neptune/ngx-slight-scroll-minified.css");

Import

Import the module on your app.module.ts file as follow.

import { NgxSlightScrollModule} from "ngx-slight-scroll";

Add to imports

imports: [
  ...
  NgxSlightScrollModule
  ...
],

Core function

<div class="card-body"
    [maxHeight]="'600px'"
    [minHeight]="'300px'"
    [scrollWidth]="12"
    [scrollThumbBg]="'darkblue'"
    [scrollBorder]="false"
    [scrollThumbRadius]="0"
    [scrollBg]="'white'"
    (scrollEndEvent)="scrollEndEvent($event)"

    ngxSlimScroll

    >

    <!-- Content goes here... -->

</div>

| Attribute | Type | value | Required | | ----------------- | ------- | ------------------------------ | -------- | | maxHeight | string | px, vh, rem, any | optional | | minHeight | string | px, vh, rem, any | optional | | scrollWidth | number | 0 - any | optional | | scrollBg | string | css color, hex, name, rgb, any | optional | | scrollThumbBg | string | css color, hex, name, rgb, any | optional | | scrollBorder | boolean | true, false | optional | | scrollThumbRadius | number | 0 - 100 | optional |

| function | Type | Description | Required | | -------------- | ---- | --------------------------------- | -------- | | scrollEndEvent | any | callback when scroll reach bottom | optional |

Code integration

To use this package as a service npm i ngx-slight-scroll install this on the root angular project .

Note: Don't forget to run this commend npm i ngx-slight-scroll on root folder or else it will throw error.

Then import the module as follow on imports array

NgxResizeElementModule