Custom scroll - integrate in Saola

Saola Animate Support Questions
1

Hi!

Attached is a custom scroll code.

I am looking for the best way to integrate this custom scroll code into a Saola file? If you launch the html file you will se it slows down the scroll when the page reaches the very top or very bottom.

Scrolling.zip (8.4 KB)

Thank you,

Shawn

2

Hi Shawn,

You can copy your script to Scene Activate event, and your CSS to Document > Edit CSS, and change them a litter bit as commented in the attachment.

custom scroll.saolapack (10.0 KB)

Regards

1 Like
3

Hi Toan,

Thank you. This works great for a small area of text!

What would one do if you love lots of different pieces with animations on a long page of content?

I tried grouping all the content into one large group and giving it the class name scroller, but that did not work at all … :frowning:

Thanks!

custom scroller long page.saolapack.zip (10.4 KB)

4

Hi Shawn,

Firstly, your code set and control scrolling of document.body tag, not the scene element. So you must set scene overflow to visible to remove the scene scrollbars.
Secondly, you must update your code to make sure the height of document.body is set correctly based on your content height. You content height can be gotten from position and size of the bottom-most element on your page (Group_1 element in your project):

var bottomMostElement = doc.getElement('Group_1').dom;
document.body.style.height = (bottomMostElement.offsetTop + bottomMostElement.offsetHeight) +'px';

Regards

1 Like
5

Thank you – it works perfecty!