npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-scroll

v1.0.2

Published

Scrollspy, animated scrollTo and scroll events

Downloads

60,677

Readme

angular-scroll

Angular is only dependency (no jQuery). 8K minified or 2K gzipped.

Example

Check out the live demo or the source code.

Install

With bower:

$ bower install angular-scroll

With npm (for use with browserify):

$ npm install angular-scroll

You can also download the production version or the development version.

If you prefer a CDN hosted version (which might speed up your load times), check out cdnjs.com/libraries/angular-scroll.

Don't forget to add duScroll to your module dependencies.

angular.element Scroll API

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().

.scrollTo( left, top [, duration [, easing ] ] )

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.

.scrollTo( element [, offset, [, duration [, easing ] ] ] )

Alias of .scrollToElement.

.scrollToElement( element [, offset, [, duration [, easing ] ] ] )

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.

.scrollToElementAnimated( element [, offset, [, duration [, easing ] ] ] )

Convenience function. Works exactly the same as scrollToElement but uses the default values from duScrollOffset, duScrollDuration and duScrollEasing unless otherwise specified.

.scrollTop|scrollLeft( )

Returns current scroll position.

.scrollTop|scrollLeft( top [, duration [, easing ] ] )

Scrolls to specified position in either axis, with optional animation.

.scrollTopAnimated|scrollLeftAnimated( top [, duration [, easing ] ] )

Convenience function like scrollToElementAnimated but for scrollTop/scrollLeft.

Promises

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).

Example

angular.module('myApp', ['duScroll']).
  controller('myCtrl', function($scope, $document) {
    var top = 400;
    var duration = 2000; //milliseconds

    //Scroll to the exact position
    $document.scrollTop(top, duration).then(function() {
      console && console.log('You just scrolled to the top!');
    });

    var offset = 30; //pixels; adjust for floating menu, context etc
    //Scroll to #some-id with 30 px "padding"
    //Note: Use this in a directive, not with document.getElementById 
    var someElement = angular.element(document.getElementById('some-id'));
    $document.scrollToElement(someElement, offset, duration);
  }
);

The above example can be achieved by configuration instead of arguments:

angular.module('myApp', ['duScroll'])
  .value('duScrollDuration', 2000)
  .value('duScrollOffset', 30)
  .controller('myCtrl', function($scope, $document) {
    $document.scrollTopAnimated(400).then(function() {
      console && console.log('You just scrolled to the top!');
    });

    var someElement = angular.element(document.getElementById('some-id'));
    $document.scrollToElementAnimated(someElement);
  }
);

Directives

du-smooth-scroll

Provides smooth anchor scrolling.

<a href="#anchor" du-smooth-scroll>Scroll it!</a>

If you, for some reason, do not want to use the href attribute as fallback, just use the du-smooth-scroll attribute instead but without leading #. Example: <a du-smooth-scroll="anchor">.

du-scrollspy

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,

<a href="#anchor" du-scrollspy>Am i active?</a>

or together with Bootstrap

<ul class="nav navbar-nav">
  <li du-scrollspy="anchor"><a href="#anchor">Link</a></li>
</ul>

du-spy-context

Enables multiple sets of spies on the same target element. Takes optional offset attribute to

<ul du-spy-context class="nav navbar-nav">
  <li du-scrollspy="anchor"><a href="#anchor">Link</a></li>
</ul>
<ul du-spy-context class="nav navbar-nav">
  <li du-scrollspy="anchor"><a href="#anchor">Link</a></li>
</ul>

du-scroll-container

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.

<div du-scroll-container>
  <p id="top">This is the top</p>
  <p id="anchor">Scroll to me, or <a href="#top" du-smooth-scroll>the top</a></p>
</div>

If your links lie outside of the scrollable element, wrap them with the du-scroll-container directive and send the element id as argument:

<ul du-scroll-container="scroll-container">
  <li><a href="#anchor" du-smooth-scroll>Link</a></li>
</ul>
<div id="scroll-container">
  [...]
</div>

All in together now

The directives play well together, try the demo or inspect its source code.

<ul du-spy-context du-scroll-container="scroll-container">
  <li><a href="#anchor" offset="30" du-smooth-scroll du-scrollspy>Link</a></li>
</ul>
<ul du-spy-context du-scroll-container="scroll-container">
  <li><a href="#anchor" offset="30" du-smooth-scroll du-scrollspy>Link</a></li>
</ul>
<div id="scroll-container">
  [...]
</div>

Observing Scroll Position

NOTE: the $duScrollChanged event and the scrollPosition service are deprecated. Use angular.element().on() together with .scrollTop() instead.

angular.module('myApp', ['duScroll']).
  controller('MyCtrl', function($scope, $document){
    $document.on('scroll', function() {
      console.log('Document scrolled to ', $document.scrollLeft(), $document.scrollTop());
    });
    var container = angular.element(document.getElementById('container'));
    container.on('scroll', function() {
      console.log('Container scrolled to ', container.scrollLeft(), container.scrollTop());
    });
  }
);

Configuration

Scroll speed

Duration is defined in milliseconds.

To set a scroll duration on a single anchor:

<a href="#anchor" du-smooth-scroll duration="5000">Scroll it!</a>

To change the default duration:

angular.module('myApp', ['duScroll']).value('duScrollDuration', 5000);

Scroll easing

Set the duScrollEasing value to a function that takes and returns a value between 0 to 1. Here's a few examples to choose from.

function invertedEasingFunction(x) {
  return 1-x;
}
angular.module('myApp', ['duScroll']).value('duScrollEasing', invertedEasingFunction);

You can also pass a custom easing function as the fourth argument in scrollTo.

Debounce Scroll Events

Set the duScrollSpyWait value in milliseconds to debounce the handler and prevent it from triggering frequent events and increase performance for large pages and/or navigations with expanding nodes.

angular.module('myApp', ['duScroll']).value('duScrollSpyWait', 1000);

Greedy option

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).

angular.module('myApp', ['duScroll']).value('duScrollGreedy', true);

Offset

To change default offset (in pixels) for the du-smooth-scroll directive:

angular.module('myApp', ['duScroll']).value('duScrollOffset', 30);

When to cancel scroll animation

Specify on which events on the container the scroll animation should be cancelled by modifying duScrollCancelOnEvents, set to false to disable entirely as shown below. Defaults to scroll mousedown mousewheel touchmove keydown.

angular.module('myApp', ['duScroll']).value('duScrollCancelOnEvents', false);

Bottom spy

To make the last du-scrollspy link active when scroll reaches page/container bottom:

angular.module('myApp', ['duScroll']).value('duScrollBottomSpy', true);

Active class

Specify the active class name to apply to a link when it is active, default is active.

angular.module('myApp', ['duScroll']).value('duScrollActiveClass', 'custom-class');

Events

The duScrollspy directive fires the global events duScrollspy:becameActive and duScrollspy:becameInactive with an angular.element wrapped element as first argument and the element being spied on as second. This is nice to have if you want the URL bar to reflect where on the page the visitor are, like this:

angular.module('myApp', ['duScroll']).
  run(function($rootScope) {
    if(!window.history || !history.replaceState) {
      return;
    }
    $rootScope.$on('duScrollspy:becameActive', function($event, $element, $target){
      //Automaticly update location
      var hash = $element.prop('hash');
      if (hash) {
        history.replaceState(null, null, hash);
      }
    });
  });

Building

$ npm install
$ bower install
$ gulp

Tests

Unit tests

$ npm test

End to end tests

$ npm run update-webdriver
$ npm run protractor