Jump to content
Search Community

ScrollToPlugin won't scroll divs or body etc.

Tazintosh test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi folks,

 

I've lost half a day trying to figure out why my scrollTo was not able to scroll anything else than "window" element on Firefox and Chrome (Safari works like a charm, even Edge…)

I finally figured out that the ScrollToPlugin documentation example wasn't too…

 

The codepen linked is a fork of the ScrollToPlugin documentation example where I only changed "window" by "$('body')".

Why I don't use "window" instead? Well because I need (since it say to be supported on the documentation) to scroll any container.

I've wrote my own function where I can pass args like container to be scroll, targets, is scroll horizontal or vertical, etc. So I've a generic function to handle various elements of my DOM, from a basic menu (like in the documentation exemple), to a much advanced own "Lightbox".

 

I've to get this fixed for my client website :( Any idea?

I'm using GSAP 2.0.2.

 

All the best.

See the Pen LqpKxZ by Tazintosh (@Tazintosh) on CodePen

Link to comment
Share on other sites

Hi @mikel

I may have miss expressed myself (sorry of my english) or you did not carefully read my message :)

Your exemple is using "window" on:

TweenLite.to(window, 1, {scrollTo:{…});

This is exactly what's I'm pointing out. If you use $('body') or want to scroll any other div, this scroolTo will —not— work on Chrome and Firefox.

Link to comment
Share on other sites

hmm, i didn't have any problem using scrollTo on a div in FireFox:

 

See the Pen svwxL by GreenSock (@GreenSock) on CodePen

 

As for scrolling the body, it's pretty standard procedure to scroll the window and I'm not sure what the advantage of scrolling body would be. 

I think the solution lies in tweaking some css. Adding html to your rule seems to help, but then you get a weird extra scrollbar gutter. 

 

See the Pen QYyyzN by GreenSock (@GreenSock) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

Hello @Tazintosh and Welcome to the GreenSock Forum!

 

Sorry for any confusion. The reason it wont work properly with <body> element but with window. Is because in the docs the <body> tag is not a container. The body element tag is like your canvas, it is like your piece of paper that your drawing on.. It is your clean slate that you add to.

 

Chrome and Firefox wont scroll the <body> for the main scrollbar because the window is what your main scrollbars are attached to. In order for it to work on the <body> you have to do like @Carl advised and use the <html> element instead. The window is what holds your HTML document, that is why it scrolls with the <html> element. But its best practice to use window or html element, unless you need a container like a div tag or other element within the body tag to scroll.

 

But this is not a GSAP bug but how browsers work with scrolling the window object or the html element. The body tag can be buggy which is why Chrome and Firefox block that type of scroll. There are ways to force it to use body tag, like adding height: 100% on both <html> and <body> tags, but you will just get cross browser mayhem if you do so.

 

Happy Tweening :)
 

 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...