{"id":13673349,"url":"https://github.com/oblador/angular-scroll","last_synced_at":"2025-05-14T19:06:06.538Z","repository":{"id":11027854,"uuid":"13359213","full_name":"oblador/angular-scroll","owner":"oblador","description":"Scrollspy, animated scrollTo and scroll events for angular.js","archived":false,"fork":false,"pushed_at":"2018-10-10T12:48:41.000Z","size":400,"stargazers_count":1480,"open_issues_count":54,"forks_count":235,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-04-13T13:57:25.936Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://oblador.github.io/angular-scroll/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oblador.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-06T08:23:57.000Z","updated_at":"2025-03-03T20:46:58.000Z","dependencies_parsed_at":"2022-09-02T19:51:02.591Z","dependency_job_id":null,"html_url":"https://github.com/oblador/angular-scroll","commit_stats":null,"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Fangular-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Fangular-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Fangular-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Fangular-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oblador","download_url":"https://codeload.github.com/oblador/angular-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248724587,"owners_count":21151559,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T10:00:37.667Z","updated_at":"2025-04-13T13:57:30.952Z","avatar_url":"https://github.com/oblador.png","language":"JavaScript","readme":"angular-scroll\n==============\n\nAngular is only dependency (no jQuery). 8K minified or 2K gzipped.\n\nExample\n-------\nCheck 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).\n\nInstall\n-------\n\n#### With bower:\n\n    $ bower install angular-scroll\n\n#### With npm (for use with browserify):\n\n    $ npm install angular-scroll\n\nYou can also 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).\n\nIf you prefer a CDN hosted version (which might speed up your load times), check out [cdnjs.com/libraries/angular-scroll](https://cdnjs.com/libraries/angular-scroll).\n\n\nDon't forget to add `duScroll` to your module dependencies. \n\n`angular.element` Scroll API\n----------------------------\n\nThis 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()`.\n\n#### `.scrollTo( left, top [, duration [, easing ] ] )`\nScrolls 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.\n\n#### `.scrollTo( element [, offset, [, duration [, easing ] ] ] )`\nAlias of `.scrollToElement`.\n\n#### `.scrollToElement( element [, offset, [, duration [, easing ] ] ] )`\nScrolls to the specified element, if `offset` is passed it will be subtracted from the elements position which is good if one uses floating menus. \n\n#### `.scrollToElementAnimated( element [, offset, [, duration [, easing ] ] ] )`\nConvenience function. Works exactly the same as `scrollToElement` but uses the default values from `duScrollOffset`, `duScrollDuration` and `duScrollEasing` unless otherwise specified. \n\n#### `.scrollTop|scrollLeft( )`\nReturns current scroll position. \n\n#### `.scrollTop|scrollLeft( top [, duration [, easing ] ] )` \nScrolls to specified position in either axis, with optional animation. \n\n#### `.scrollTopAnimated|scrollLeftAnimated( top [, duration [, easing ] ] )` \nConvenience function like `scrollToElementAnimated` but for `scrollTop`/`scrollLeft`. \n\n#### Promises\nAnimated 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).\n\n#### Example\n```js\nangular.module('myApp', ['duScroll']).\n  controller('myCtrl', function($scope, $document) {\n    var top = 400;\n    var duration = 2000; //milliseconds\n\n    //Scroll to the exact position\n    $document.scrollTop(top, duration).then(function() {\n      console \u0026\u0026 console.log('You just scrolled to the top!');\n    });\n\n    var offset = 30; //pixels; adjust for floating menu, context etc\n    //Scroll to #some-id with 30 px \"padding\"\n    //Note: Use this in a directive, not with document.getElementById \n    var someElement = angular.element(document.getElementById('some-id'));\n    $document.scrollToElement(someElement, offset, duration);\n  }\n);\n```\n\nThe above example can be achieved by configuration instead of arguments:\n\n```js\nangular.module('myApp', ['duScroll'])\n  .value('duScrollDuration', 2000)\n  .value('duScrollOffset', 30)\n  .controller('myCtrl', function($scope, $document) {\n    $document.scrollTopAnimated(400).then(function() {\n      console \u0026\u0026 console.log('You just scrolled to the top!');\n    });\n\n    var someElement = angular.element(document.getElementById('some-id'));\n    $document.scrollToElementAnimated(someElement);\n  }\n);\n```\n\n\nDirectives\n----------\n\n### `du-smooth-scroll`\nProvides smooth anchor scrolling. \n```html\n\u003ca href=\"#anchor\" du-smooth-scroll\u003eScroll it!\u003c/a\u003e\n```\n\nIf 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: `\u003ca du-smooth-scroll=\"anchor\"\u003e`.\n\n### `du-scrollspy`\nObserves 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`,\n\n```html\n\u003ca href=\"#anchor\" du-scrollspy\u003eAm i active?\u003c/a\u003e\n```\n\nor together with Bootstrap\n\n```html\n\u003cul class=\"nav navbar-nav\"\u003e\n  \u003cli du-scrollspy=\"anchor\"\u003e\u003ca href=\"#anchor\"\u003eLink\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n### `du-spy-context`\nEnables multiple sets of spies on the same target element. Takes optional `offset` attribute to \n\n```html\n\u003cul du-spy-context class=\"nav navbar-nav\"\u003e\n  \u003cli du-scrollspy=\"anchor\"\u003e\u003ca href=\"#anchor\"\u003eLink\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cul du-spy-context class=\"nav navbar-nav\"\u003e\n  \u003cli du-scrollspy=\"anchor\"\u003e\u003ca href=\"#anchor\"\u003eLink\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n```\n### `du-scroll-container`\nModifies 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`.\n\n```html\n\u003cdiv du-scroll-container\u003e\n  \u003cp id=\"top\"\u003eThis is the top\u003c/p\u003e\n  \u003cp id=\"anchor\"\u003eScroll to me, or \u003ca href=\"#top\" du-smooth-scroll\u003ethe top\u003c/a\u003e\u003c/p\u003e\n\u003c/div\u003e\n```\n\nIf your links lie outside of the scrollable element, wrap them with the `du-scroll-container` directive and send the element id as argument:\n\n```html\n\u003cul du-scroll-container=\"scroll-container\"\u003e\n  \u003cli\u003e\u003ca href=\"#anchor\" du-smooth-scroll\u003eLink\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv id=\"scroll-container\"\u003e\n  [...]\n\u003c/div\u003e\n```\n\n### [All in together now](http://www.youtube.com/watch?v=cx4KtTezEFg\u0026feature=kp)\nThe 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).\n\n```html\n\u003cul du-spy-context du-scroll-container=\"scroll-container\"\u003e\n  \u003cli\u003e\u003ca href=\"#anchor\" offset=\"30\" du-smooth-scroll du-scrollspy\u003eLink\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cul du-spy-context du-scroll-container=\"scroll-container\"\u003e\n  \u003cli\u003e\u003ca href=\"#anchor\" offset=\"30\" du-smooth-scroll du-scrollspy\u003eLink\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv id=\"scroll-container\"\u003e\n  [...]\n\u003c/div\u003e\n```\n\nObserving Scroll Position\n-------------------------\n\n**NOTE:** the `$duScrollChanged` event and the `scrollPosition` service are deprecated. Use `angular.element().on()` together with `.scrollTop()` instead. \n\n```js\nangular.module('myApp', ['duScroll']).\n  controller('MyCtrl', function($scope, $document){\n    $document.on('scroll', function() {\n      console.log('Document scrolled to ', $document.scrollLeft(), $document.scrollTop());\n    });\n    var container = angular.element(document.getElementById('container'));\n    container.on('scroll', function() {\n      console.log('Container scrolled to ', container.scrollLeft(), container.scrollTop());\n    });\n  }\n);\n```\n\nConfiguration\n-------------\n\n### Scroll speed\nDuration is defined in milliseconds.\n\nTo set a scroll duration on a single anchor:\n```html\n\u003ca href=\"#anchor\" du-smooth-scroll duration=\"5000\"\u003eScroll it!\u003c/a\u003e\n```\n\nTo change the default duration:\n```js\nangular.module('myApp', ['duScroll']).value('duScrollDuration', 5000);\n```\n\n### Scroll easing\nSet 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.\n\n```js\nfunction invertedEasingFunction(x) {\n  return 1-x;\n}\nangular.module('myApp', ['duScroll']).value('duScrollEasing', invertedEasingFunction);\n```\n\nYou can also pass a custom easing function as the fourth argument in `scrollTo`.\n\n### Debounce Scroll Events\nSet 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.\n\n```js\nangular.module('myApp', ['duScroll']).value('duScrollSpyWait', 1000);\n```\n\n### Greedy option\nSet 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).\n\n```js\nangular.module('myApp', ['duScroll']).value('duScrollGreedy', true);\n```\n\n### Offset\nTo change default offset (in pixels) for the `du-smooth-scroll` directive:\n\n```js\nangular.module('myApp', ['duScroll']).value('duScrollOffset', 30);\n```\n\n### When to cancel scroll animation\nSpecify 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`.\n\n```js\nangular.module('myApp', ['duScroll']).value('duScrollCancelOnEvents', false);\n```\n\n### Bottom spy\nTo make the last `du-scrollspy` link active when scroll reaches page/container bottom:\n\n```js\nangular.module('myApp', ['duScroll']).value('duScrollBottomSpy', true);\n```\n\n### Active class\nSpecify the active class name to apply to a link when it is active, default is `active`.\n\n```js\nangular.module('myApp', ['duScroll']).value('duScrollActiveClass', 'custom-class');\n```\n\nEvents\n------\n\nThe `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: \n\n```js\nangular.module('myApp', ['duScroll']).\n  run(function($rootScope) {\n    if(!window.history || !history.replaceState) {\n      return;\n    }\n    $rootScope.$on('duScrollspy:becameActive', function($event, $element, $target){\n      //Automaticly update location\n      var hash = $element.prop('hash');\n      if (hash) {\n        history.replaceState(null, null, hash);\n      }\n    });\n  });\n```\n\n\nBuilding\n--------\n\n    $ npm install\n    $ bower install\n    $ gulp\n\nTests\n-----\n\n### Unit tests\n\n    $ npm test\n\n### End to end tests\n\n    $ npm run update-webdriver\n    $ npm run protractor\n","funding_links":[],"categories":["ScrollSpy"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foblador%2Fangular-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foblador%2Fangular-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foblador%2Fangular-scroll/lists"}