Slim scroll directive for angular4
npm install angular4-slimscrollSlimScroll to your application module.
typescript
import { SlimScroll } from 'angular4-slimscroll';
@NgModule({
declarations: [
SlimScroll,
AppComponent
],
imports: [
...
],
bootstrap: [AppComponent]
})
export class AppModule {}
`
And then add slimScroll attribute with options to your element:
`html
width="auto"
height="250px"
size="7px">
Lorem ipsum dolor sit amet...
Motivation
Existing slimScrolls do not work as they should... So we have written another one 😏
Installation
``shell
npm i angular4-slimscroll --save
``
API Reference
Options can be passed to an element via html attributes:
|Property |Type |Default |Description |
| :----------------- | :---- | :------------- | :---------------------------------------------------------------- |
|width |string |auto |Width in pixels of the visible scroll area |
|height |string |250px |Height in pixels of the visible scroll area |
|size |string |7px |Width in pixels of the scrollbar and rail |
|color |string |#000 |Scrollbar color, accepts any hex/color value |
|position |string |right |Scrollbar position - left/right |
|distance |string |1px |Distance in pixels between the side edge and the scrollbar |
|start |string |top |Default scroll position on load - top / bottom |
|opacity |number |.4 |Sets scrollbar opacity |
|transition |number |.3 |Set transition for opacity in seconds |
|alwaysVisible |boolean|false |Enables always-on mode for the scrollbar |
|disableFadeOut |boolean|false |Check if we should hide the scrollbar when user is hovering over |
|railVisible |boolean|false |Sets visibility of the rail |
|railColor |string |#333 |Sets rail color |
|railOpacity |number |.2 |Sets rail opacity |
|railClass |string |slimScrollRail|Defautlt CSS class of the slimscroll rail |
|barClass |string |slimScrollBar |Defautlt CSS class of the slimscroll bar |
|wrapperClass |string |slimScrollDiv |Defautlt CSS class of the slimscroll wrapper |
|allowPageScroll |boolean|false |Check if mousewheel should scroll the window if we reach top/bottom|
|wheelStep |number |20 |Scroll amount applied to each mouse wheel step |
|touchScrollStep |number |200 |Scroll amount when user is using gestures |
|borderRadius |string |7px |Sets border radius |
|railBorderRadius |string |7px |Sets border radius of the rail |
|scrollTo |number |0 |Set default point from which to start scrolling |
|autoScrollToBottom|boolean|false` |Scroll to bottom on adding new content to container |