NgxMatHoverScroll

HoverScroll

An Angular Directive to enable hover on scroll.

Features

Setup

Sample Code

 <div ngx-HoverScroll  [className]="'custom-scroll'" class="list">
    <div  class="cards" *ngFor="let fruit of fruits">
      <div class="card">
        <div class="cardData">

          {{fruit}}
        </div>
      </div>
    </div>
</div>

.custom-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: #c9c9c9;
  border-radius: 2px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgb(112, 112, 112);
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: rgb(110, 110, 110);
}

Properties

| Name | Description | | :--- | :----: | |scrollType :string| Default to 'EnableY'. Supports [All,EnableY,EnableX].| |className :string| Class name to get properties of custom scroll bar.|

scrollType Property | Name | Description | | :--- | :----: | |All| Enables both X and Y axis scroll.| |EnableY |Enable only Y axis scroll.| |EnableX |Enable only X axis scroll.|

This library was generated with Angular CLI version 11.2.14.