This is a set of customized scrollbars for AngularJS that allows you to apply consistent styles and behavior across different browsers (including Firefox) that's built around Malihu's jQuery Custom Scrollbar by Manos Malihutsakis. It provides an AngularJS directive with universal configuration or individual scrollbar configuration.
The demo code is available on the gh-pages branch if you want to check that out too.
Growing scrollbar container
Updating Scrollbar Demo
Demo with Angular Material
- Add ng-scrollbars and its dependencies to your main file (index.html) This can be downloaded by
- Using bower and running
bower install ng-scrollbars
- Or downloading the production version or the development version.
- Or downloading the demo zip file
In your web page:
ngScrollbarsas a dependency in your module
var app = angular
- Add ng-scrollbar directive to any elements:
Specify the configuration as an object visible within the directive's scope:
4a. For example, the 'config' object referenced in step 3 could be configured like the following:$scopeconfig =autoHideScrollbar: falsetheme: 'light'advanced:updateOnContentResize: truesetHeight: 200scrollInertia: 0}
4b. Some system-wide settings, such as enabling the buttons, can also be set by configuring the ScrollBarsProvider that's included in the ngScrollbars module as referenced in step 2:var app = angular;app;
4c. System-wide defaults can also be specified. However, these settings are overridden by any scope level configuration as shown in 4a. For example:var app = angular;app;
All configuration options available to Malihu's scrollbar can be provided through the above configuration. See Malihu's page for more details
As of 0.0.6, scrollbars can be dynamically updated:
TitleA bunch of content
See this demo
Other options may include:
$scope.updateScrollbar('update', ...). Manually updates the scrollbar
$scope.updateScrollbar('disable'). Temporarily disables scrollbar
$scope.updateScrollbar('stop'). Stops any running scrolling animations
$scope.updateScrollbar('destroy'). Completely removes the scrollbar and returns element to original state
See Malihu's documentation for more information on the available callbacks.
If the width for some reason keeps shrinking then make sure you specify the width of the CSS for all children elements where ng-scrollbars is applied.
Here's an example ng-scrollbars use case:
TitleA bunch of content
The CSS may need to structured like the following:
This is because Malihu looks at the width of the child elements and adjusts, so the child elements may shrink to 0 width if nothing is specified. Also note the container width is a little wider than its contents width because of the extra scrollbar width.
See this demo
Fixed issue with minified version being out of sync with source
Scrollbar configs will now dynamically update on changes. Hopefully should fix a couple of issues that users mentioned (#23, #26)
This version's minified version wasn't updated as reported by @florinbardosi in #27
Ghost release to synchronize bower with npm version numbers
Fix reported issues (#21) by making ng-scrollbars-update attribute optional. It wasn't before...
Error: [$compile:nonassign] Expression 'undefined' used with directive 'ngScrollbars' is non-assignable!
Add ng-scrollbars-update attribute to update scrollbars through a method
Fix so by default user can press scrollbar buttons to scroll up or down.
Fix so directive works with ng-strict-di
Updated to allow user to set defaults to all scrollbars through the provider configuration. These defaults are overridden by any scope configuration.
Updated ngScrollbars module to allow for configuration that applies to all scrollbars such as the buttons and horizontal scrollbar support
Initial release with basic directive wrapper around Malihu
I needed an AngularJS scrollbar that worked well with a dark theme and was consistently styled across different browsers. I found several Angular scrollbars listed below but in general the styling didn't fit or they were lacking features.
Ultimately I found a Stackoverflow post by JMaylin that inspired me to continue the integration effort he/she started.
In my search for angularjs scrollbars, I also came across a few others: