CustomScroll

This library was generated with Angular CLI version 10.0.14.

How to use

To use this library you need import ScrollModule in your AppModule

import { ScrollModule } from 'custom-scroll-leobonhart';

Then add imported module to the property imports in decorator @NgModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ScrollModule <---
  ],
  providers: [],
  bootstrap: [AppComponent]
})

After that you can be used component ScrollComponent to add custom scroll.

ScrollComponent has @Inputs settings: | Name | Description | | ---------- |:--------------------------------------------------------- | | alwaysShow | it is a boolean state property, always show scrolling or only show scrolling when hovering over an element | | type | Scroll display style, there is a two value default and narrow | | opacity | Scroll transparency it is a number value | | enable | Scroll available it is a boolean value | example:

<custom-scroll 
   type="default | narrow" 
   opacity="1" 
   enable="false | true | 1 | 0" 
   alwaysShow="false | true | 1 | 0"
>
    ... Your content
</custom-scroll>

also you can config default options Injection token that can be used to specify default options

const CUSTOM_SCROLL_DEFAULT_OPTIONS: InjectionToken<ScrollConfig>

or can use service ScrollSettingService

example

...
import { ScrollModule, ScrollSettingService } from 'custom-scroll-leobonhart';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ScrollModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

  constructor(setting: ScrollSettingService) {
    setting.config.alwaysShow = true;
    setting.config.setMouseScrollLikeTouch = false;
  }

}

settings

| Name | Type | Description | | ----------------------- |:---------------------- |:------------------------------ | | alwaysShow | boolean | always show scrolling or only show scrolling when hovering over an element, by default false | | type | default or narrow | Scroll display style, by default default | | opacity | number | Scroll transparency, by default 1 | | minThumbSize | number | Minimum thumb(slider) hight size, by default 40 | | wheelStep | number | Mouse wheel scrolling step, by default 5 | | setMouseScrollLikeTouch | boolean | Scrolling by mouse down on the content, the working principle is similar to touch, by default false |

It's correct work when set body size without margin and set height (if you use scroll on your content without static height)

body{
    margin: 0;
    height: 100vh;
    width: 100vw;
}

or you need to set to parent element height or set height to custom-scroll selector

<div style="height: 500px;">
    <custom-scroll>
        ... Your content
    </custom-scroll>
</div>

or

<custom-scroll style="height: 500px;">
        ... Your content
</custom-scroll>

In custom scroll realized only rihgt side scroll

Also realized touch events but not tested