Share Posted January 25, 2019 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 More sharing options...
Share Posted January 25, 2019 Hi @Tazintosh, Unfortunately, I do not have the time to analyze your code. Try it with this pen: See the Pen XxwjqZ by mikeK (@mikeK) on CodePen Happy scrolling ... Mikel 2 Link to comment Share on other sites More sharing options...
Author Share Posted January 25, 2019 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 More sharing options...
Share Posted January 25, 2019 Hi @Tazintosh, sorry, I was too fast ... That´s a point for the experts. Kind regards Mikel Link to comment Share on other sites More sharing options...
Share Posted January 25, 2019 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 2 Link to comment Share on other sites More sharing options...
Share Posted January 25, 2019 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 4 Link to comment Share on other sites More sharing options...
Author Share Posted January 25, 2019 Thank you both guys for the input. I'll think of a solution knowing this then. All the best. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now