# Ionic get scroll position

**URL:** <https://forum.ionicframework.com/t/ionic-get-scroll-position/56711>\
**Category:** ionic-v3\
**Created:** [July 6, 2016, 5:50am UTC](https://forum.ionicframework.com/t/ionic-get-scroll-position/56711 "2016-07-06T05:50:47Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![radbeta](https://avatars.discourse-cdn.com/v4/letter/r/a587f6/32.png) [@radbeta](https://forum.ionicframework.com/u/radbeta)\
**Post date:** [July 6, 2016, 5:50am UTC](https://forum.ionicframework.com/t/ionic-get-scroll-position/56711/1 "2016-07-06T05:50:47Z")

</div>

In ionic 2, how do you get the current scroll position like in ionic version 1?

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [July 6, 2016, 5:58am UTC](https://forum.ionicframework.com/t/ionic-get-scroll-position/56711/2 "2016-07-06T05:58:16Z")

</div>

you can get the current ionContent / Scrollcontainer with the @ViewChild decorator of angular 2.

> **[Ionic Framework](https://ionicframework.com/docs/api/components/content/Content/)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

---

<div class="post-metadata">

**Author:** ![radbeta](https://avatars.discourse-cdn.com/v4/letter/r/a587f6/32.png) [@radbeta](https://forum.ionicframework.com/u/radbeta)\
**Post date:** [July 6, 2016, 6:11am UTC](https://forum.ionicframework.com/t/ionic-get-scroll-position/56711/3 "2016-07-06T06:11:45Z")

</div>

the content variable will have the current scroll coordinates?

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [July 6, 2016, 6:13am UTC](https://forum.ionicframework.com/t/ionic-get-scroll-position/56711/4 "2016-07-06T06:13:32Z")

</div>

you can call functions like getScrollTop

> **[Ionic Framework](https://ionicframework.com/docs/api/components/content/Content/)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

---

<div class="post-metadata">

**Author:** ![radbeta](https://avatars.discourse-cdn.com/v4/letter/r/a587f6/32.png) [@radbeta](https://forum.ionicframework.com/u/radbeta)\
**Post date:** [July 6, 2016, 6:17am UTC](https://forum.ionicframework.com/t/ionic-get-scroll-position/56711/5 "2016-07-06T06:17:50Z")

</div>

ah, just tried it now. Thanks! I was looking for the scroll API under Scroll in the docs. Didn’t think it would be under content.

---

<div class="post-metadata">

**Author:** ![piyukore](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/piyukore/32/102073_2.png) [@piyukore](https://forum.ionicframework.com/u/piyukore)\
**Post date:** [July 6, 2016, 6:57am UTC](https://forum.ionicframework.com/t/ionic-get-scroll-position/56711/6 "2016-07-06T06:57:07Z")

</div>

@bengtler Thank u so much, I was looking for that from a long time 😄

one more thing though, with getScrollTop or setScrollTop you can access or set scrollTop position. But is there any way to trigger a function when at certain scrollTop position? or like a scroll event where you have access to scrollTop position at all times?

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [July 6, 2016, 7:07am UTC](https://forum.ionicframework.com/t/ionic-get-scroll-position/56711/7 "2016-07-06T07:07:23Z")

</div>

not, yet i think.

But you can listen on all native dom-events

`<div (scroll)="scrollPosition = $event.xxxx"></div>`

I do not know exactly the correct key, where the scrollposition is stored on the event object.

---

<div class="post-metadata">

**Author:** ![piyukore](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/piyukore/32/102073_2.png) [@piyukore](https://forum.ionicframework.com/u/piyukore)\
**Post date:** [July 6, 2016, 7:35am UTC](https://forum.ionicframework.com/t/ionic-get-scroll-position/56711/8 "2016-07-06T07:35:12Z")

</div>

Yes, I already tried that, don’t know why but (scroll) event doesn’t seem to be working.  
Not triggering the function 🙁

Can you point me to the resourse, where you found that?

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [July 6, 2016, 7:50am UTC](https://forum.ionicframework.com/t/ionic-get-scroll-position/56711/9 "2016-07-06T07:50:31Z")

</div>

maybe you are not scrolling the ionContent --\> there is a scroll-container in there, which scrolls 😟

---

<div class="post-metadata">

**Author:** ![piyukore](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/piyukore/32/102073_2.png) [@piyukore](https://forum.ionicframework.com/u/piyukore)\
**Post date:** [July 6, 2016, 12:15pm UTC](https://forum.ionicframework.com/t/ionic-get-scroll-position/56711/10 "2016-07-06T12:15:47Z")

</div>

okay, I’ll try using that … Thanks for your help!

---

<div class="post-metadata">

**Author:** ![dmastag](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dmastag/32/104373_2.png) [@dmastag](https://forum.ionicframework.com/u/dmastag)\
**Post date:** [August 21, 2016, 4:40pm UTC](https://forum.ionicframework.com/t/ionic-get-scroll-position/56711/11 "2016-08-21T16:40:41Z")

</div>

You could use the addScrollListener as explained in

> [@"On-scroll" not working in \<ion-content\>](https://forum.ionicframework.com/t/on-scroll-not-working-in-ion-content/42041/2):
>
> The current way to do it is like this: HTML: \<ion-content id="my-content"\> JS: // Need to wait until the component has been initialized ngAfterViewInit() { // Here 'my-content' is the ID of my ion-content this.content = this.app.getComponent('my-content'); this.content.addScrollEventListener(this.onPageScroll); } onPageScroll() { console.log('They see me scrolling...'); } Where did you see an on-scroll attribute?

Here is a working Plunkr in case you have difficulties implementing it.  
Just scroll away.

> **[Plunker - Ionic 2 Test Environment](https://plnkr.co/edit/UThuNR?p=preview)**
>
> Created on https://plnkr.co: Helping you build the web.

---

<div class="post-metadata">

**Author:** ![anoop\_gt](https://avatars.discourse-cdn.com/v4/letter/a/c6cbf5/32.png) [@anoop\_gt](https://forum.ionicframework.com/u/anoop_gt)\
**Post date:** [November 8, 2016, 10:40am UTC](https://forum.ionicframework.com/t/ionic-get-scroll-position/56711/12 "2016-11-08T10:40:09Z")

</div>

Hi ,

I am using an ion-scroll inside ion-toolbar with only horizontal scrolling enabled in IONIC 2. Scrolling is working smoothly. Is there any way to set the scroll position based on some condition?

Thanks  
Anoop

---

<div class="post-metadata">

**Author:** ![russell07](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@russell07](https://forum.ionicframework.com/u/russell07)\
**Post date:** [November 18, 2017, 11:38am UTC](https://forum.ionicframework.com/t/ionic-get-scroll-position/56711/13 "2017-11-18T11:38:57Z")

</div>

In the latest Ionic version, ngAfterViewInit() in home.ts requires changing to:

```auto
this.content.ionScroll.subscribe(($event) => {
                this.scrollAmount = $event.scrollTop;
            });

```
