Notwithstanding Precautions, Misadventure
    Have ideas to improve npm?Join in the discussion! »

    ng-tiny-scrollbar

    0.10.1 • Public • Published

    ngTinyScrollbar

    An angular directive port of the TinyScrollbar See simple demo

    How to use

    Install using bower

    bower install ng-tiny-scrollbar --save
    

    Install using npm

    npm install ng-tiny-scrollbar --save
    

    Add css and javascript to your site

    <link rel="stylesheet" href="bower_components/ng-tiny-scrollbar/dist/ng-tiny-scrollbar.css" type="text/css"/>
    <script src="bower_components/ng-tiny-scrollbar/dist/ng-tiny-scrollbar.js"></script>

    Add the ngTinyScrollbar module as a dependency of your application

    Mark any item you want custom scrollbars on with the scrollbar attribute.

    <div id="myCustomScrollbarContainer" scrollbar>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel metus sed
        ipsum facilisis ornare. Vestibulum mattis rutrum sem. Phasellus ullamcorper nisi
        vel enim lobortis lacinia. Vestibulum eu dui ligula. Sed nibh velit, faucibus sed
        feugiat ac, fermentum sed sem. Vestibulum porttitor neque nec urna tincidunt, vel
        lobortis nibh tempor. Aliquam ac ex ante. Aenean quis dolor id nunc maximus venenatis.
    </div>

    Add a width and a height in your css for the .scroll-viewport underneath your item. Ensure your container has a width that's slightly larger than the viewport otherwise the scrollbar will be overtop of your content

    #idCustomScrollbarContainer {
      width: 120px;
    }
     
    #idCustomScrollbarContainer .scroll-viewport {
        height: 200px;
        width: 100px;
    }

    Specify options via the attribute value. You can use scope properties for any of the values

    <div scrollbar="{axis: 'y', wheel: false}"></div>

    Here's the list of all the options and the default values

    {
        axis : 'y',             // Vertical or horizontal scrollbar? ( x || y ).
        wheel : true,           // Enable or disable the mousewheel;
        wheelSpeed : 40,        // How many pixels must the mouswheel scroll at a time.
        wheelLock : true,       // Lock default scrolling window when there is no more content.
        scrollInvert : false,   // Enable invert style scrolling
        trackSize : false,      // Set the size of the scrollbar to auto or a fixed number.
        thumbSize : false,      // Set the size of the thumb to auto or a fixed number.
        alwaysVisible: true,    // Set to false to hide the scrollbar if not being used
        autoUpdate: false       // Autoupdate the scrollbar if DOM changes. Needs MutationObserver or a polyfill to be available
    }

    These can also be set up via the scrollbarProvider. e.g.

    myApp.config(['scrollbarProvider', function(scrollbarProvider) {
      scrollbarProvider.defaults.autoUpdate = true;
    }]);

    These defaults will be available to all scrollbars in your app.

    Customizing appearance

    Build using the less file and specify the following variables:

    @scrollbar-width: 15px;         // width of the scrollbar; 
    @scrollbar-color: lightgray;    // color of the scrollbar 
    @scroll-thumb-color: gray;      // color of the thumb 
    @scroll-border-radius: 5px;     // border radius, set to 0 for square scrollbar and thumb 

    Autoupdate on DOM changes

    The scrollbar supports updates on DOM changes. This needs to be enabled in the options:

    <div scrollbar="{autoUpdate: true}"></div>

    In order for this to work, MutationObserver or a polyfill must be available. See here which browsers are supported.

    License

    The MIT License (MIT)

    Copyright (c) 2014 Vadim Kazakov

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

    Install

    npm i ng-tiny-scrollbar

    DownloadsWeekly Downloads

    23

    Version

    0.10.1

    License

    MIT

    Last publish

    Collaborators

    • avatar