Angular-io-slimscroll-2 NPM

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 'angular-io-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 angular-io-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
`maxHeightBeforeEnable`	boolean	`undefined`	Enable Slimscroll if content reach this limit

License

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

angular scroll slimScroll directive

@angular/common @angular/compiler @angular/core @angular/platform-browser @angular/platform-browser-dynamic core-js rxjs zone.js

@infinitebrahmanuniverse/nolb-angular-i @everything-registry/sub-chunk-1134 @zalastax/nolb-angular-i

2.3.3

6 years ago