mxdc-scrollintoview-mxdc
v1.1.8
Published
A custom scrollbar written in pure AngularJS
Downloads
3
Readme
scrollintoview-mxdc
A custom scrollbar written in pure AngularJS.
Works with the mouse and on touch screen.
Tired of using jquery for a stupid scrollbar? well, this directive is just for you.
Usage
- Add scrollintoview-mxdc.min.js to you main file (index.html)
you can download this by:
- using bower and running
bower install scrollintoview-mxdc
- Download the production version or the development version.
In your web page:
<script src="angular.js"></script>
<script src="dist/scrollintoview-mxdc.min.js"></script>
<link rel="stylesheet" href="dist/scrollintoview-mxdc.min.css" />
- Set
ngScrollbar
as a dependency in your module
var myapp = angular.module("myapp", ["ngScrollbar"]);
- Add scrollintoview-mxdc directive to the wanted element, example:
<div class="scrollme" scrollintoview-mxdc>....</div>
Rebuild the scrollbar
In case you need to rebuild the scrollbar, you may tell scrollintoview-mxdc to rebuild it for you by broadcasting an event. It's useful to use this option when the size or visibility of the container is dynamic and during the link phase the size can't be determined.
<div class="scrollme" scrollintoview-mxdc rebuild-on="rebuild:me">....</div>
// rebuild the scrollbar
$scope.$broadcast("rebuild:me");
In case you need to rebuild the scrollbar on every window's resize, you may use "rebuild-on-resize" option.
<div class="scrollme" scrollintoview-mxdc rebuild-on-resize>....</div>
In case you need to stick content to bottom (chat or something) use "bottom" option.
<div class="scrollme" scrollintoview-mxdc bottom>....</div>
Events and Flags
On rebuilding the scrollbar you can get notified by 2 events
$scope.$on("scrollbar.show", function () {
console.log("Scrollbar show");
});
$scope.$on("scrollbar.hide", function () {
console.log("Scrollbar hide");
});
Or you can use "is-bar-shown" option. It should be read-only
<div class="scrollme" scrollintoview-mxdc is-bar-shown="flag">....</div>
<div>Bar shown: {{flag}}</div>
Examples
See the example in the respository. example/index.html