scrollTop not working on ios

[Johny13]

Hi guys,

i have a problem when using scrollTop on ios phones that cant recognize. Is there a way to fix it? This is my code: 

        TweenMax.set('.trail-wrapper', { alpha: 0 })
        TweenMax.set('.cloud', { alpha: 0 })
        var tl = new TimelineMax({ paused: true });

        tl.to('.trail-wrapper', 0.5, { alpha: 1 })
            .to('.cloud', 0.5, { alpha: 1 })
            .to('.rocket-wrapper', 1.5, { y: -400, ease: Expo.easeIn })
            .to('.cloud', 2.5, { attr: { cy: 185 }, ease: Expo.easeIn }, "-=3")
            .set('.cloud', { clearProps: "all" })
            .set('.rocket-wrapper', { y: 0 })
            .to('body', 1, { scrollTop: 0, autoKill:false })
            .to('.rocket-wrapper', 4, { y: 0, ease: Elastic.easeOut.config(0.5, 0.4) })
            .to('.trail-wrapper', 2.5, { scaleX: 0.5, scaleY: 0, alpha: 0, ease: Expo.easeOut }, "-=2.0")

        $('.toTop').on('click', function () {
            tl.play(0)
        });

 

[Sahil]

I think you need to use 'scrollTo'  with scrollTo plugin, and probably on window rather than body. Does your code work in other browsers?

 

.to(window, 1, { scrollTo: 0, autoKill:false })

 

[Johny13]

It won't work:

Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object.

[Sahil]

Are you using scrollTo plugin?

[Johny13]

Yes, it's included.

[Sahil]

Can you post a codepen demo? It will be hard to guess without demo.

 

 

[Johny13]

See the Pen RxpKvr by mangicapra (@mangicapra) on CodePen

 

For some reason here is working and in my project it wont..

[lennco]

Hi @Johny13

 

Are you sure the element you're targeting is actually scrollable? You can get the current scroll position of an element like this:

var body = document.querySelector('body');
console.log(body.scrollTop);

 

I tried adding a div parent with 'overflow:scroll' and set it as the scroll container in the tween, and it worked just fine as far as I could tell.

 

Edit: In Codepen it's the parent element of the body that gets the scrollbars.

[Johny13]

It is, it just needed to by inside quotation mark. Thanks for your help.