Custom scrollbar plugin for AngularJS
npm install mb-scrollbarmb-scrollbar
============
Custom scrollbar plugin for AngularJS
A small, unobtrusive plugin for AngularJS that allows placement of a custom scrollbar on any element. It will retain its size, but place any child elements into a scaling container div. The container's size can be set to automatically update, or can be called manually by broadcasting a 'recalculateMBScrollbars' event from your controller scope.
Using the plugin is very easy - simply add the attribute mb-scrollbar, where the attribute's value is the config for the scrollbar. Example:
Also don't forget to include the module in your own Angular app
var app = angular.module('YourApp', ['mb-scrollbar']);
One option to recalculate the size of the container is to set the autoResize config option to true. When the plugin detects a child element has been added/removed, it will automatically recalculate.
This option is not always ideal, and in some older browsers, may not work as expected. Another option, to call the recalculate function manually. A small Service is provided to make this easy, though the recalculateMBScrollbars event may also be broadcast, if you prefer.
// Option 1
$scope.$broadcast('recalculateMBScrollbars');
// Option 2 - This option is preferred of the two. It wraps the call in a short timeout,
// which allows the scope to compile first. It also requires the 'mbScrollbar' Service to be injected
mbScrollbar.recalculate();
You should pass an object as the value of mb-scrollbar. Here is an example with all of the attributes you may set. Shown values are the default values.
config = {
autoResize: false, // If true, will listen for DOM elements being added or removed inside the scroll container
direction: 'vertical', // The direction of the scrollbar
scrollbar: {
width: 6, // Width (thickness. Is actually height on horizontal scrollbars) of the scrollbar
hoverWidth: 8, // Width on scrollbar hover
color: 'rgba(0,0,0, .6)', // Background color of the scrollbar
show: false // If true, scrollbar will always be visible
},
scrollbarContainer: {
width: 12, // Width of the container surrounding the scrollbar. Becomes visible on hover
color: 'rgba(0,0,0, .1)' // Background color of the scrollbar container
},
scrollTo: null // Scroll to the 'start' or 'end' on initialization and content changes. Pixel values may also be given.
}
The plugin has not yet been rigorously tested, but should work in all modern browsers, and in IE9+
Author: Matthew Balmer
Twitter: @mattbalmer
Website: http://mattbalmer.com
License: MIT