An angular directive port of the TinyScrollbar See simple demo
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.
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 thumbThe 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.
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.