Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/amiteshhh/ion-smooth-scroll
Ionic v1 angular directive for id based smooth scroll
https://github.com/amiteshhh/ion-smooth-scroll
anchorscroll angular ionic smooth-scrolling
Last synced: about 2 months ago
JSON representation
Ionic v1 angular directive for id based smooth scroll
- Host: GitHub
- URL: https://github.com/amiteshhh/ion-smooth-scroll
- Owner: amiteshhh
- Created: 2017-02-05T06:33:52.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-12T19:43:01.000Z (almost 8 years ago)
- Last Synced: 2024-11-10T11:47:27.516Z (3 months ago)
- Topics: anchorscroll, angular, ionic, smooth-scrolling
- Language: JavaScript
- Homepage:
- Size: 40 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ion-smooth-scroll
An alternate to [$ionicScrollDelegate.anchorScroll](http://ionicframework.com/docs/api/service/$ionicScrollDelegate) for smooth scrolling to given `id` without changing the [hash](https://en.wikipedia.org/wiki/Fragment_identifier) of url.
Ionic component `anchorScroll` works unreliably. Below are few issues/limitations with it:
1. **Content goes out of view** : Sometimes Ionic `anchorScroll` scrolls beyond the target element and therefore part of content area goes out of view and doesn't become visible even when user tries to scroll.
[See this Github Issue](https://github.com/driftyco/ionic/issues/508) or [this issue](https://github.com/driftyco/ionic/issues/618).
This scenario can be easily reproduced where dynamic data is rendered inside `ion-content`.
2. **No support for _css_ based scrollView** : anchorScroll requires that the scrollable content to use ionic JS scroll (i.e `ion-content` or `ion-scroll` with no `overflow-scroll = true`).
This library is intended to provide the lacking functionality of `anchorScroll`.
> `ion-smooth-scroll` uses Ionic [$ionicScrollDelegate.scrollTo](http://ionicframework.com/docs/api/service/$ionicScrollDelegate) when
scrollViews created by ionContent and ionScroll directives.
## Install
Script file is available from a variety of sources. Choose the one that fits you.
- Github Source Code https://github.com/amiteshhh/ion-smooth-scroll/blob/master/ion-smooth-scroll.min.js
- Bower `bower install ion-smooth-scroll --save`
- CDN `Raw Git` https://rawgit.com/amiteshhh/ion-smooth-scroll/master/ion-smooth-scroll.min.js
## Getting started
Add `script` reference to your application (normally `index.html`)
```html
```
Add the `ion-smooth-scroll` as a dependency in your angular module
```javascript
angular.module('myApp', ['ion-smooth-scroll']);
```
### Usage
Directive is used as an attribute. When clicked it will scroll to the target.
```html
...
```
### Parameters
| Param | Type | Details |
| ------------- |:-------------| -----|
| ionSmoothScroll | string | id of DOM element where you want to scroll to.|
| delegateHandle | string | Value of `delegate-handle` attribute. Both scrollView container and element with `ion-smooth-scroll` must have this attribute even if you use css scrollView.
This is used only for getting the DOM reference of scrollable container.|
| duration | number | Scroll transistion duration in millisecond.
**Applicable only for css driven scrollView container.** It will also be ignored if new scroll position is less than _200px_ distance from current postion. You will be rarely passing this parameter :)
You can also configure it at app level during _angular_ [config Phase](#config) explained later.
_(default: 400)_ |
## Examples
### 1. With ionic scrollView
```html
...
Go to Div 1
...
...
...
```
### 2. With css scrollView
The only difference is you can pass additional parameter, **duration**, to specify _scroll transition duration_
```html
```
## Config
> it will not affect the scrollable container created by `ionic-content` or `ion-scroll`.
Configure the scroll transistion duration using `ionSmoothScrollProvider.`__`setScrollDuration`__ method _(default: 400 ms)_.
You will be rarely using this feature as default value suffices in most of the cases.
```javascript
angular.module('myApp', ['ion-smooth-scroll'])
.config(['ionSmoothScrollProvider', function(ionSmoothScrollProvider){
/*uncomment below line and see it in action
it will not affect if the scrollable container is created by ionic
(e.g ion-content or ion-scroll with no overflow-scroll="true")
*/
ionSmoothScrollProvider.setScrollDuration(6000);
//ion-smooth-scroll will scroll for 6 seconds to reach the target
}]);
```
## Demo
[Plunker Demo](https://embed.plnkr.co/Y71E3q/)