Controlling the Timeline with Scrolling

Using JavaScript with Hype
1

I know this topic has been posted several times and I went through a lot of postings and downloaded many files but I’ve hit a little bit of a wall here. I have this file that works on Safari (thanks to @h_classen ) but not on any other browsers. Any ideas on a fix while keeping the JS simple?

Thank you and Happy Xmas and Holidays everyone! :champagne:

simplescroll.hype.zip (2.9 MB)

2

From what I understand Safari’s overflow is at the body level.

Other browser are at the html level.

So you need to account for both.

whatScroll = ((document.body.scrollTop || document.documentElement.scrollTop) / 100);

4 Likes
3

:scream: :exploding_head: that worked perfectly! Thank you so much @markhunte !

1 Like
4

Hey hypers,

I try this out for ios devices.
But have problems with ontouchmove

onscroll = function()
{
scrollTest()

};

ontouchmove = function()
{
touchmove()

};

function scrollTest() {
whatScroll = ((document.body.scrollTop) / 100);
hypeDocument.goToTimeInTimelineNamed(whatScroll, ‘Main Timeline’);
}

    function touchmove() {
    whatScroll = ((document.body.scrollTop) / 100);
    hypeDocument.goToTimeInTimelineNamed(whatScroll, 'Main Timeline');
    }

I have no idea what I have to write in the function touchmove() sectsion.
Overall thank you very much to both of you. On Desktop there are no problems.

5

First, you will want to make the adjustment in calculating whatScroll that @MarkHunte recommended:

whatScroll = ((document.body.scrollTop || document.documentElement.scrollTop) / 100);

Note that the goToTimeInTimelineNamed() function takes a time value for its first argument, so you may also want to adjust the calculation since that one is just dividing the position by 100.