prst22 Posted May 2, 2022 Share Posted May 2, 2022 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 More sharing options...
OSUblake Posted May 2, 2022 Share Posted May 2, 2022 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 More sharing options...
prst22 Posted May 2, 2022 Author Share Posted May 2, 2022 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 More sharing options...
OSUblake Posted May 2, 2022 Share Posted May 2, 2022 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 More sharing options...
blende64 Posted July 28, 2022 Share Posted July 28, 2022 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 More sharing options...
Cassie Posted July 28, 2022 Share Posted July 28, 2022 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') } }); 1 Link to comment Share on other sites More sharing options...
blende64 Posted July 28, 2022 Share Posted July 28, 2022 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. 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 28, 2022 Share Posted July 28, 2022 Glad to hear! Link to comment Share on other sites More sharing options...
iDad5 Posted July 28, 2022 Share Posted July 28, 2022 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 More sharing options...
blende64 Posted July 28, 2022 Share Posted July 28, 2022 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 More sharing options...
Cassie Posted July 28, 2022 Share Posted July 28, 2022 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 More sharing options...
iDad5 Posted July 28, 2022 Share Posted July 28, 2022 Thank you both for your patience. Should have guessed as much, I seem to be be thinking in circles... 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