custom-scroll-leobonhart v0.1.0
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 setheight
(if you use scroll on your content without staticheight
)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
> In custom scroll realized only rihgt side scroll
> Also realized touch events but not tested