1 | angular-scroll
|
2 | ==============
|
3 |
|
4 | Only dependent on AngularJS (no jQuery). 8K minified or 2K gzipped.
|
5 |
|
6 | Example
|
7 | -------
|
8 | Check out [the live demo](http://oblador.github.io/angular-scroll/) or the [source code](https://github.com/oblador/angular-scroll/blob/master/example/index.html).
|
9 |
|
10 | Install
|
11 | -------
|
12 | With bower:
|
13 |
|
14 | $ bower install angular-scroll
|
15 |
|
16 | Or download the [production version](https://raw.github.com/oblador/angular-scroll/master/angular-scroll.min.js) or the [development version](https://raw.github.com/oblador/angular-scroll/master/angular-scroll.js).
|
17 |
|
18 | Don't forget to add `duScroll` to your module dependencies.
|
19 |
|
20 | `angular.element` Scroll API
|
21 | ----------------------------
|
22 |
|
23 | This module extends the `angular.element` object with a few jQuery like functions. Note that `$document` is an `angular.element`, for usage example see below. In case of name collisions existing jQuery or jqlite functions will be preserved, just use the prefixed version: ie `.duScrollTo()` instead of `.scrollTo()`.
|
24 |
|
25 | #### `.scrollTo( left, top [, duration [, easing ] ] )`
|
26 | Scrolls the element/window to the specified left/top position. If `duration` is specified the scrolling is animated for n milliseconds. If `easing` is ommited the animation will default to the `duScrollEasing` function.
|
27 |
|
28 | #### `.scrollTo( element [, offset, [, duration [, easing ] ] ] )`
|
29 | Alias of `.scrollToElement`.
|
30 |
|
31 | #### `.scrollToElement( element [, offset, [, duration [, easing ] ] ] )`
|
32 | Scrolls to the specified element, if `offset` is passed it will be subtracted from the elements position which is good if one uses floating menus.
|
33 |
|
34 | #### `.scrollToElementAnimated( element [, offset, [, duration [, easing ] ] ] )`
|
35 | Convenience function. Works exactly the same as `scrollToElement` but uses the default values from `duScrollOffset`, `duScrollDuration` and `duScrollEasing` unless otherwise specified.
|
36 |
|
37 | #### `.scrollTop|scrollLeft( )`
|
38 | Returns current scroll position.
|
39 |
|
40 | #### `.scrollTop|scrollLeft( top [, duration [, easing ] ] )`
|
41 | Scrolls to specified position in either axis, with optional animation.
|
42 |
|
43 | #### `.scrollTopAnimated|scrollLeftAnimated( top [, duration [, easing ] ] )`
|
44 | Convenience function like `scrollToElementAnimated` but for `scrollTop`/`scrollLeft`.
|
45 |
|
46 | #### Promises
|
47 | Animated scrolling returns a `$q` promise, it will resolve when the scrolling has finished or be rejected if cancelled (by starting another scroll animation before it finished).
|
48 |
|
49 | #### Example
|
50 | ```js
|
51 | angular.module('myApp', ['duScroll']).
|
52 | controller('myCtrl', function($scope, $document) {
|
53 | var top = 400;
|
54 | var duration = 2000; //milliseconds
|
55 |
|
56 | //Scroll to the exact position
|
57 | $document.scrollTop(top, duration).then(function() {
|
58 | console && console.log('You just scrolled to the top!');
|
59 | });
|
60 |
|
61 | var offset = 30; //pixels; adjust for floating menu, context etc
|
62 | //Scroll to #some-id with 30 px "padding"
|
63 | //Note: Use this in a directive, not with document.getElementById
|
64 | var someElement = angular.element(document.getElementById('some-id'));
|
65 | $document.scrollToElement(someElement, offset, duration);
|
66 | }
|
67 | );
|
68 | ```
|
69 |
|
70 | The above example can be achieved by configuration instead of arguments:
|
71 |
|
72 | ```js
|
73 | angular.module('myApp', ['duScroll'])
|
74 | .value('duScrollDuration', 2000)
|
75 | .value('duScrollOffset', 30)
|
76 | .controller('myCtrl', function($scope, $document) {
|
77 | $document.scrollTopAnimated(400).then(function() {
|
78 | console && console.log('You just scrolled to the top!');
|
79 | });
|
80 |
|
81 | var someElement = angular.element(document.getElementById('some-id'));
|
82 | $document.scrollToElementAnimated(someElement);
|
83 | }
|
84 | );
|
85 | ```
|
86 |
|
87 |
|
88 | Directives
|
89 | ----------
|
90 |
|
91 | ### `du-smooth-scroll`
|
92 | Provides smooth anchor scrolling.
|
93 | ```html
|
94 | <a href="#anchor" du-smooth-scroll>Scroll it!</a>
|
95 | ```
|
96 |
|
97 | ### `du-scrollspy`
|
98 | Observes whether the target element is at the top of the viewport (or container) and adds an `active` class if so. Takes optional `offset` and `duration` attributes which is passed on to `.scrollTo`,
|
99 |
|
100 | ```html
|
101 | <a href="#anchor" du-scrollspy>Am i active?</a>
|
102 | ```
|
103 |
|
104 | or together with Bootstrap
|
105 |
|
106 | ```html
|
107 | <ul class="nav navbar-nav">
|
108 | <li du-scrollspy="anchor"><a href="#anchor">Link</a></li>
|
109 | </ul>
|
110 | ```
|
111 |
|
112 | ### `du-spy-context`
|
113 | Enables multiple sets of spies on the same target element. Takes optional `offset` attribute to
|
114 |
|
115 | ```html
|
116 | <ul du-spy-context class="nav navbar-nav">
|
117 | <li du-scrollspy="anchor"><a href="#anchor">Link</a></li>
|
118 | </ul>
|
119 | <ul du-spy-context class="nav navbar-nav">
|
120 | <li du-scrollspy="anchor"><a href="#anchor">Link</a></li>
|
121 | </ul>
|
122 | ```
|
123 | ### `du-scroll-container`
|
124 | Modifies behavior of `du-scrollspy` and `du-smooth-scroll` to observe/scroll within and element instead of the window/document. Good for modals/elements with `overflow: auto/scroll`.
|
125 |
|
126 | ```html
|
127 | <div du-scroll-container>
|
128 | <p id="top">This is the top</p>
|
129 | <p id="anchor">Scroll to me, or <a href="#top" du-smooth-scroll>the top</a></p>
|
130 | </div>
|
131 | ```
|
132 |
|
133 | If your links lie outside of the scrollable element, wrap them with the `du-scroll-container` directive and send the element id as argument:
|
134 |
|
135 | ```html
|
136 | <ul du-scroll-container="scroll-container">
|
137 | <li><a href="#anchor" du-smooth-scroll>Link</a></li>
|
138 | </ul>
|
139 | <div id="scroll-container">
|
140 | [...]
|
141 | </div>
|
142 | ```
|
143 |
|
144 | ### [All in together now](http://www.youtube.com/watch?v=cx4KtTezEFg&feature=kp)
|
145 | The directives play well together, try [the demo](http://oblador.github.io/angular-scroll/container.html) or inspect its [source code](https://github.com/oblador/angular-scroll/blob/master/example/container.html).
|
146 |
|
147 | ```html
|
148 | <ul du-spy-context du-scroll-container="scroll-container">
|
149 | <li><a href="#anchor" offset="30" du-smooth-scroll du-scrollspy>Link</a></li>
|
150 | </ul>
|
151 | <ul du-spy-context du-scroll-container="scroll-container">
|
152 | <li><a href="#anchor" offset="30" du-smooth-scroll du-scrollspy>Link</a></li>
|
153 | </ul>
|
154 | <div id="scroll-container">
|
155 | [...]
|
156 | </div>
|
157 | ```
|
158 |
|
159 | Observing Scroll Position
|
160 | -------------------------
|
161 |
|
162 | **NOTE:** the `$duScrollChanged` event and the `scrollPosition` service are deprecated. Use `angular.element().on()` together with `.scrollTop()` instead.
|
163 |
|
164 | ```js
|
165 | angular.module('myApp', ['duScroll']).
|
166 | controller('MyCtrl', function($scope, $document){
|
167 | $document.on('scroll', function() {
|
168 | console.log('Document scrolled to ', $document.scrollLeft(), $document.scrollTop());
|
169 | });
|
170 | var container = angular.element(document.getElementById('container'));
|
171 | container.on('scroll', function() {
|
172 | console.log('Container scrolled to ', container.scrollLeft(), container.scrollTop());
|
173 | });
|
174 | }
|
175 | );
|
176 | ```
|
177 |
|
178 | Configuration
|
179 | -------------
|
180 |
|
181 | ### Scroll speed
|
182 | Duration is defined in milliseconds.
|
183 |
|
184 | To set a scroll duration on a single anchor:
|
185 | ```html
|
186 | <a href="#anchor" du-smooth-scroll duration="5000">Scroll it!</a>
|
187 | ```
|
188 |
|
189 | To change the default duration:
|
190 | ```js
|
191 | angular.module('myApp', ['duScroll']).value('duScrollDuration', 5000);
|
192 | ```
|
193 |
|
194 | ### Scroll easing
|
195 | Set the `duScrollEasing` value to a function that takes and returns a value between 0 to 1. Here's [a few examples](https://gist.github.com/gre/1650294) to choose from.
|
196 |
|
197 | ```js
|
198 | function invertedEasingFunction(x) {
|
199 | return 1-x;
|
200 | }
|
201 | angular.module('myApp', ['duScroll']).value('duScrollEasing', invertedEasingFunction);
|
202 | ```
|
203 |
|
204 | You can also pass a custom easing function as the fourth argument in `scrollTo`.
|
205 |
|
206 | ### Greedy option
|
207 | Set the `duScrollGreedy` value to `true` if the elements you are observing are not wrapping the whole section you want to observe, but merely the first one in the section (such as headlines).
|
208 |
|
209 | ```js
|
210 | angular.module('myApp', ['duScroll']).value('duScrollGreedy', true);
|
211 | ```
|
212 |
|
213 | ### Offset
|
214 | To change default offset (in pixels) for the `du-smooth-scroll` directive:
|
215 |
|
216 | ```js
|
217 | angular.module('myApp', ['duScroll']).value('duScrollOffset', 30);
|
218 | ```
|
219 |
|
220 | Events
|
221 | ------
|
222 |
|
223 | The `duScrollspy` directive fires the global events `duScrollspy:becameActive` and `duScrollspy:becameInactive` with an angular.element wrapped element as first argument. This is nice to have if you want the URL bar to reflect where on the page the visitor are, like this:
|
224 |
|
225 | ```js
|
226 | angular.module('myApp', ['duScroll']).
|
227 | config(function($locationProvider) {
|
228 | $locationProvider.html5Mode(true);
|
229 | }).
|
230 | run(function($rootScope, $location){
|
231 | $rootScope.$on('duScrollspy:becameActive', function($event, $element){
|
232 | //Automaticly update location
|
233 | var hash = $element.prop('hash');
|
234 | if(hash) {
|
235 | $location.hash(hash.substr(1)).replace();
|
236 | $rootScope.$apply();
|
237 | }
|
238 | });
|
239 | });
|
240 | ```
|
241 |
|
242 |
|
243 | Building
|
244 | --------
|
245 |
|
246 | $ gulp
|
247 |
|
248 | Tests
|
249 | -----
|
250 |
|
251 | ### Unit tests
|
252 |
|
253 | $ npm test
|
254 |
|
255 | ### End to end tests
|
256 |
|
257 | $ npm run update-webdriver
|
258 | $ npm run protractor
|