Jump to content
GreenSock

prst22

scroll-behavior: smooth; and ScrollToPlugin

Recommended Posts

html {
    scroll-behavior: smooth;
}

This one line of css cost me many hours of debugging.  ScrollTo pluging was working funky when scroll-behavior set to smooth. 

Chrome  100.0.4896.127, Windows 10

Link to comment
Share on other sites

Welcome to the forums @prst22

 

Are you using Bootstrap? Most people don't add that to their CSS, so I was just curious how it got there.

Link to comment
Share on other sites

1 hour ago, OSUblake said:

Welcome to the forums @prst22

 

Are you using Bootstrap? Most people don't add that to their CSS, so I was just curious how it got there.

Hi, no I don't use Bootstrap. What I was doing is creating a child theme for wordpress, apparently some parent themes are using this specific css rule. 

Link to comment
Share on other sites

Gotcha. We can add in a check for that condition in the next release so others won't run into the same issue.

Link to comment
Share on other sites

  • 2 months later...
On 5/2/2022 at 2:49 PM, prst22 said:

html {
    scroll-behavior: smooth;
}

This one line of css cost me many hours of debugging.  ScrollTo pluging was working funky when scroll-behavior set to smooth. 

Chrome  100.0.4896.127, Windows 10

We have the same problem. However, we need scroll-behavior: smooth to scroll smoothly to anchors on the page.

How can we make sure that the ScrollTo plugin still works correctly?

Link to comment
Share on other sites

Well if you need to use both then maybe do something like this? Just an idea though. I would just use one or the other if possible.

 

gsap.to(myDiv, {
  duration: 2, 
  scrollTo: 250,
  onStart: () => { body.classList.remove('smooth') }
  onComplete: () => { body.classList.add('smooth') }
});

 

  • Like 1
Link to comment
Share on other sites

47 minutes ago, Cassie said:

Well if you need to use both then maybe do something like this? Just an idea though. I would just use one or the other if possible.

 

gsap.to(myDiv, {
  duration: 2, 
  scrollTo: 250,
  onStart: () => { body.classList.remove('smooth') }
  onComplete: () => { body.classList.add('smooth') }
});

 

Works like a charm. Thank you very much.

  • Like 1
Link to comment
Share on other sites

Glad to hear!

Link to comment
Share on other sites

Probably of no use for this already solved problem, but maybe of use for future reference:

 

window.scrollTo({
  top: 100,
  left: 100,
  behavior: 'smooth'
});

from (https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo)

 

That should have decent support, and might solve some bread and butter scenarios, where adding and removing a class in the body could seem impractical.

 

Äh - thinking of it what kink of fairy-dust is this, you're using @Cassie 'scroll-behavior: smooth' is according to the thread set directly on the html element. What magic is it that removing an unrelated class (but similarly named) from the body makes this work? (Just to be clear - it totally sounded logical to me in the first second and third instance - and I'm not trying to by 'smarty pants' [was that what you said earlier?] I'm genuinely baffled...)

 

Link to comment
Share on other sites

17 minutes ago, iDad5 said:

 

window.scrollTo({
  top: 100,
  left: 100,
  behavior: 'smooth'
});

In my opinion, this would even be the cleaner solution, but in our context it does not work as desired.

 

17 minutes ago, iDad5 said:

Äh - thinking of it what kink of fairy-dust is this, you're using @Cassie 'scroll-behavior: smooth' is according to the thread set directly on the html element. What magic is it that removing an unrelated class (but similarly named) from the body makes this work? (Just to be clear - it totally sounded logical to me in the first second and third instance - and I'm not trying to by 'smarty pants' [was that what you said earlier?] I'm genuinely baffled...)

We have adapted @Cassie's suggestion so that the appropriate CSS class is applied to the html element, not the body. Using the class, we set the value of scroll-behavior to auto.

Link to comment
Share on other sites

Quote

Äh - thinking of it what kink of fairy-dust is this, you're using @Cassie 'scroll-behavior: smooth' is according to the thread set directly on the html element. What magic is it that removing an unrelated class (but similarly named) from the body makes this work?

 

It's pseudo code, just showing a possible approach. They understood. All good. It's why I prefaced it with 'you could do something like this'

Link to comment
Share on other sites

Thank you both for your patience. Should have guessed as much, I seem to be be thinking in circles...

  • Like 1
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.
×