Nebulae Populate M83

    angular-io-slimscroll
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.3 • Public • Published

    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.

    Install

    npm i angular-io-slimscroll

    DownloadsWeekly Downloads

    127

    Version

    2.3.3

    License

    MIT

    Last publish

    Collaborators

    • rd-dev