angular-io-slimScroll

Customizable slimScroll directive for Angular 2.

Code Example

Demo

You'll need to add SlimScroll to your application module.

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:

<div slimScroll
     width="auto"
     height="250px"
     size="7px">
    Lorem ipsum dolor sit amet...   
 </div>

Motivation

Existing slimScrolls do not work as they should... So we have written another one 😏

Installation

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 |

License

This project is licensed under the MIT license. See the LICENSE file for more info.