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:
<div class='roster' mb-scrollbar="scrollbarConfig">
<div ng-repeat="person in roster"> {{person.name}} </div>
</div>
The roster div will stay at whatever dimensions your CSS dictates, and anything inside will expand infinitely in whatever direction you specify in the config.
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();
Also note that when the scrollbar is no longer necessary, it will automatically hide. Should you require any custom styling, you may target the following classes on the element with the mb-scrollbar attribute
.has-scrollbar - when the content is scrollable
.no-scrollbar - when the content is NOT scrollable
To scroll to a fixed point a method was added to the mbScrollbar service. Easily call mbScrollbar.scrollTo(0) to change the scroll position. Keep in mind that since this value is simply applied to the container margin, it should probably be negative.
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