Ion scroll - get current zoom level

ionic-v1
1

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.

2

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

3

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

4

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;
}

5

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

6

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

http://ionicframework.com/docs/api/service/$ionicScrollDelegate/