Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DYOU

ScrollToPlugin is jumping from the beginning all the time

Recommended Posts

I have this code when content load.

And i have my .menu-content as a modal box. Position fixed, full screen with an inner scroll.

And i have a bunch of anchor links targeting to a section block inside the .menu-content

<a href='#section1'></a>
<a href='#section2'></a>
<a href='#section3'></a>
<a href='#section4'></a>

<div class='menu-content'>
   <section id='section1'>...lorem ipsum.....</section>
   <section id='section2'>...lorem ipsum.....</section>
   <section id='section3'>...lorem ipsum.....</section>
   <section id='section4'>...lorem ipsum.....</section>
</div>

 

 

I just want a click event in the link that scroll into that section. Something similar to this Codepen

 

import 'gsap/TweenLite';
import 'gsap/CSSPlugin';
import 'gsap/ScrollToPlugin';

 

 

document.addEventListener('DOMContentLoaded', () => {

let links = document.getElementsByClassName('menu-list')[0].querySelectorAll('a');

for (let link of links) {
    link.addEventListener('click', (element) => {
      element.preventDefault;
      var options = {
        scrollTo: {
          y: element.target.hash,
          autoKill: false,
          offsetY: 268
        },
        ease: Power1.easeOut
      };
      var scrollbarContainer = document.getElementsByClassName('menu-content')[0];
      TweenLite.to(scrollbarContainer, 2, options);
    });
}

}

 

 

But when i try in my project, the ScrollTo seems to jump from the Beginning (top of the screen) sometimes and then go to the target :( 
Then if i click before one ScrollTo ends, then go to the other element correctly. 

 

Thanks in advance 

See the Pen gXQLzN by HectorLeon (@HectorLeon) on CodePen

Link to post
Share on other sites

Any reason for the autoKill? And the name of your variable "scrollbarContainer" looks kind of suspect. Are you animating the scrollbar?

 

Outside of that, your code looks fine. If something's funky, it might be related to your CSS or markup. That's about the best advice I can give without seeing it.

 

 

  • Like 3
Link to post
Share on other sites
2 hours ago, OSUblake said:

Any reason for the autoKill? And the name of your variable "scrollbarContainer" looks kind of suspect. Are you animating the scrollbar?

 

Outside of that, your code looks fine. If something's funky, it might be related to your CSS or markup. That's about the best advice I can give without seeing it.

 

 


Hello, the autokill seems to work properly if  -> i click before one ScrollTo ends, then go to the other element correctly. 
Otherwise seems to always start from the beginning

 

And not, i'm not animating the scrollbar. I just to indicate which div hold the content and have the overflow-y: scroll
Because this is a modal box

 


So weird i updated the codepen to basically what i have in my project. But in codepen works  and in my project do this weird jump.

TweenLite.version
"1.20.2"
CSSPlugin.version
"1.20.3"
ScrollToPlugin.version
"1.9.0"

 

What kind of CSS rule could do something like that :( 
 

Link to post
Share on other sites

Maybe scroll-behavior?

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

 

The other day somebody had it set to smooth, and it was causing issues in Firefox.

 

Just by chance, I opened an issue on Smooth Scrollbar, doing my daily ritual of informing Mac users that they're doing touch incorrectly, and I noticed you had a recent issue on there. 

 

That might explain the scrollbarContainer variable I asked about. If you are using that library, I would imagine that it might cause issues as it's not doing actual browser scrolling. It's just translating the container.

 

  • Like 1
Link to post
Share on other sites
29 minutes ago, OSUblake said:

That might explain the scrollbarContainer variable I asked about. If you are using that library, I would imagine that it might cause issues as it's not doing actual browser scrolling. It's just translating the container.

 

 

 

 

I'm using Chrome last version anyway.


i only have the Smooth Scrollbar in the main content of the web. not in the modal -> ScrollbarContainer. But i didn't destroy the instance, just locked it when i open the modal.

 

Hmmm gonna check it right now.

Link to post
Share on other sites

I checked the scroll-behavior and also tried without initialize Smooth Scrollbar (just in case something was messing behind scenes) but keeps calculating from the top: 0 everytime, not from the current offset :( 

 

 

 

Link to post
Share on other sites

I'm all out of ideas. Any chance that you could try and recreate the issue in Codepen? If not, maybe post or send me a simplified version of what you're working on.

 

And as a quick sanity check, I would disable all the GSAP stuff, and see if the browser has problems scrolling to the linked hash.

  • Like 2
Link to post
Share on other sites
6 hours ago, OSUblake said:

I'm all out of ideas. Any chance that you could try and recreate the issue in Codepen? If not, maybe post or send me a simplified version of what you're working on.

 

And as a quick sanity check, I would disable all the GSAP stuff, and see if the browser has problems scrolling to the linked hash.


Thanks for all the help, i finally recreate the issue.


But have to be a repo, just have to clone it  ( the branch lab-without-react/  no  master) and run in your terminal:
https://github.com/HectorLS/tibicenas-framework/blob/lab-without-react/


$ yarn install
$ npm run dev

 

a tab will auto-open in your browser.
Just click in the burger icon to display the modal.
 

  • Like 1
Link to post
Share on other sites

Hello @OSUblake, did you find time to check the case recreated on github ?

I kept trying without any success, kind of frustrated

Link to post
Share on other sites

Hi @DYOU

 

I didn't see your last post. Sorry about that. I'm not around a computer right now, but I'll take a look at it later today.

Link to post
Share on other sites

@DYOU and @hectorleon It would be of great help if you could create a reduced CodePen that everyone can easily see.

It isn't practical to be cloning repos and such when better and more efficient options exist: CodePen, jsfiddle, plunkr, etc that allow us to view, edit and share fully working examples. 

thanks.

 

 

 

 

Link to post
Share on other sites

@Carl  was because of the packages, but i'll work this night on it, on post it here tomorrow, so hopefully i can get a solution for this.

Thanks in advance

Link to post
Share on other sites

Did you get this worked out? I didn't look at your repo because you said you were going to rework it.

Link to post
Share on other sites

I'm back from holidays :)! keep working on it, hope in 2 weeks  the rework would be ready . thanks, i'll let you know

Link to post
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.

×