Don't work ion-scroll zoming

Question

I am making simple image view have zoom/scroll(xy). but i can't got correct result by using ion-scroll. i am sorry, I am new on ionic. Here is my .js code part and class.

JS

<ion-content class="bg-color detail-cont">

    <ion-scroll class="filter-image" zooming="true" direction="xy" min-zoom="1" locked="false" has-bouncing="true">
        <div class="my-image" style="background: url('{{ getCurPhotoURI() }}')"></div>
    </ion-scroll>

</ion-content>

CSS

.filter-image {
    height:100% !important;
    width: 100% !important;
    background-color: black;
}
.my-image{
    width: 100% !important;
    height: 100% !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center, center !important;
}

What's wrong? Thank you for advance. Regards.

Answer 1

I assume that the zooming is just not working? This is because the you haven't set the overflow-scroll property to false . For some reason, when you don't set this to false, the ion-scroll element won't be able to detect zooming.

So your code would look like this:

<ion-content class="bg-color detail-cont">

<ion-scroll class="filter-image" overflow-scroll="false" zooming="true" direction="xy" min-zoom="1" locked="false" has-bouncing="true">
    <div class="my-image" style="background: url('{{ getCurPhotoURI() }}')"></div>
</ion-scroll>