Resizing the scrollview after using translate3d on its content


Hello folks,

I want to hide a certain content after a tap, with animation. Doing this with max-height: 0 and css transition is choppy and ugly, so I found out that using translate3d would be better for nice transition - and actually it’s visually perfect, very very smooth.

transform: translate3d(0, -440px, 0);

where 440px is the size of the element I want to hide. I’m then applying this translation to all the content of the scrollview and this element simply disappears out of the view. As said, it’s perfect.

The problem is, the scrollview itself doesn’t resize to take its content translation into account. So when scrolling all the way down, there is a huge gap of 440px at the bottom of the page, which is not great at all.

I know it’s an expected behavior, but I can’t seems to find a solution. Can anyone help me out on this ?

Thanks !


Bring Up My Post Please




after it’s done so it re-calculates your scroll’s size. Remember to inject ionicScrollDelegate.

Anyways, you sure that is the best way to hide it? I know you want it animated but I’m sure there’s a way with ng-show and ng-animate or something thet is less hacky. Don’t ask me tho, I really don’t know about animations, just saying.


Let’s say that until now I didn’t find anything as smooth as that :smile: I tried .resize and it didn’t work… On browser with ionic lab, but it seems to work on my Nexus 5 so it may be the answer, yes. Thanks !


Following your post I felt the urge to test again some other solutions, but I must say… Changing the height, either with basic CSS, GSAP or VelocityJS didn’t go well - it’s choppy and laggy, doesn’t feel great. I think the translate3d really is the only solution for this to look good.


So the resize did the work for you I understand? At least on device that is?


/yes, looks like it worked - at least on my Nexus 5, will have to check it on more devices. Thanks.


Glad I could help then.