ScrollToPlugin is jumping from the beginning all the time

[DYOU 0 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

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.

 

 

[DYOU 0 Likes (Newbie)]

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  
 

[OSUblake 9,990 Likes (Superhero)]

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.

 

[DYOU 0 Likes (Newbie)]

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.

[DYOU 0 Likes (Newbie)]

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  

 

 

 

[OSUblake 9,990 Likes (Superhero)]

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.

[hectorleon 1 Likes (Newbie)]

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.
 

[DYOU 0 Likes (Newbie)]

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

I kept trying without any success, kind of frustrated

[OSUblake 9,990 Likes (Superhero)]

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.

[Carl 9,066 Likes (Superhero)]

@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.

 

 

 

 

[DYOU 0 Likes (Newbie)]

@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

[OSUblake 9,990 Likes (Superhero)]

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

[hectorleon 1 Likes (Newbie)]

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