# Ion scroll - get current zoom level

**URL:** <https://forum.ionicframework.com/t/ion-scroll-get-current-zoom-level/15729>\
**Category:** ionic-v1\
**Created:** [January 15, 2015, 5:05am UTC](https://forum.ionicframework.com/t/ion-scroll-get-current-zoom-level/15729 "2015-01-15T05:05:38Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![olgagr](https://avatars.discourse-cdn.com/v4/letter/o/ebca7d/32.png) [@olgagr](https://forum.ionicframework.com/u/olgagr)\
**Post date:** [January 15, 2015, 5:05am UTC](https://forum.ionicframework.com/t/ion-scroll-get-current-zoom-level/15729/1 "2015-01-15T05:05:38Z")

</div>

Is there any way to get current zoom level ? I need to change the content of ion-scroll depending on zoom level. I can’t find any api for that, but maybe I miss something.

---

<div class="post-metadata">

**Author:** ![Fares](https://avatars.discourse-cdn.com/v4/letter/f/71e660/32.png) [@Fares](https://forum.ionicframework.com/u/Fares)\
**Post date:** [February 13, 2015, 5:54pm UTC](https://forum.ionicframework.com/t/ion-scroll-get-current-zoom-level/15729/2 "2015-02-13T17:54:46Z")

</div>

I also need this. Did you find a way to handle that?

---

<div class="post-metadata">

**Author:** ![olgagr](https://avatars.discourse-cdn.com/v4/letter/o/ebca7d/32.png) [@olgagr](https://forum.ionicframework.com/u/olgagr)\
**Post date:** [February 15, 2015, 5:49am UTC](https://forum.ionicframework.com/t/ion-scroll-get-current-zoom-level/15729/3 "2015-02-15T05:49:57Z")

</div>

@Fares There are not API for that. In my case, fortunately, I just have to know if we are in zoom mode or not. I handled that this way:

If you are zooming, the element with scroll class will get inline styles, for example:

```
<ion-scroll zooming="true" locking="true" direction="xy" min-zoom="1" max-zoom="2">
    <div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(2);">

```

This is a code for zoom level 2. I’m parsing the inline styles to check the zoom level:

```
var getZoomLevel = function() {
    var match = element.find('.scroll').attr('style').match(/scale\((.)\)/);
    return match ? parseInt(match[1], 10) : 0;
}; 

```

Then you can check:

```
if(getZoomLevel() === 2) { // do something };

```

This is not ideal solution, but for my needs it works.

---

<div class="post-metadata">

**Author:** ![Fares](https://avatars.discourse-cdn.com/v4/letter/f/71e660/32.png) [@Fares](https://forum.ionicframework.com/u/Fares)\
**Post date:** [February 15, 2015, 5:18pm UTC](https://forum.ionicframework.com/t/ion-scroll-get-current-zoom-level/15729/4 "2015-02-15T17:18:52Z")

</div>

Thanks  
Here is a better but not perfect solution. It gives the zoom level after stopping the ‘pinchtozoom’.  
But I need to get the zoom level on real time when pinching.

html:

```
<ion-scroll delegate-handle="Handle" on-release="onRelease()" zooming="true" direction="xy" style="width: 500px; height: 500px">
<div style="width: 5000px; height: 5000px; background: url('https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg') repeat"></div>

```

javascript:

$scope.onRelease = function() {  
var scrollDelegate = $ionicScrollDelegate.$getByHandle(‘Handle’);  
var view = scrollDelegate.getScrollView();  
var scale = view.\_\_zoomLevel;  
}

---

<div class="post-metadata">

**Author:** ![elepetit](https://avatars.discourse-cdn.com/v4/letter/e/7ab992/32.png) [@elepetit](https://forum.ionicframework.com/u/elepetit)\
**Post date:** [May 20, 2015, 4:39am UTC](https://forum.ionicframework.com/t/ion-scroll-get-current-zoom-level/15729/5 "2015-05-20T04:39:28Z")

</div>

hey, this is my solve  
**app.js**

> $scope.dede = function(){  
> $ionicScrollDelegate.getScrollView().onScroll = function () {  
> var movetop = $ionicScrollDelegate.getScrollPosition().top;  
> var moveleft = $ionicScrollDelegate.getScrollPosition().left;  
> var movezoom = $ionicScrollDelegate.getScrollPosition().zoom;  
> console.log(moveleft);}};

then you put in your html ion-scroll \> on-scroll=“dede();”

tell me if ok for you

---

<div class="post-metadata">

**Author:** ![AshConnell](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ashconnell/32/64477_2.png) [@AshConnell](https://forum.ionicframework.com/u/AshConnell)\
**Post date:** [July 24, 2015, 2:22am UTC](https://forum.ionicframework.com/t/ion-scroll-get-current-zoom-level/15729/6 "2015-07-24T02:22:55Z")

</div>

> [@olgagr](#):
>
> var getZoomLevel = function() {  
> var match = element.find(‘.scroll’).attr(‘style’).match(/scale((.))/);  
> return match ? parseInt(match[1], 10) : 0;  
> };

Yeah so getScrollPosition() now contains zoom info, but the docs aren’t updated yet.

> **[$ionicScrollDelegate - Service in module ionic - Ionic Framework](https://ionicframework.com/docs/v1/api/service/$ionicScrollDelegate/)**
>
> Ionic makes it incredibly easy to build beautiful and interactive mobile apps using HTML5 and Angular.