tholman
Slow scrolling in Chrome
Firstly, thanks for this great project! :)
I implemented it on my website (https://uplink.tech/) but noticed the scrolling is a bit weird in Chrome (v83 on macOS): first it scrolls very slowly, and then very quickly. In Firefox and Safari it works fine.
What can I do to debug this further?
Hmmm i see what you mean, strange considering the demo site is working fine on chrome 83. Is there any other code on the site that is trying to edit the scroll position?
How have you implemented the library? (can't really see the code, since its all compiled)
How have you implemented the library?
Via Webpack(er), but I've tried everything else as well... commenting out all other JS code (one piece was watching the scroll event, so I thought that was the culprit, but nothing changed) and simply loading it on window.onload. The problem persists...
Unless you have any other idea (maybe the structure of the page or some specific CSS?) I'm sorry to say I give up... :(
Hey @manuelmeurer,
it looks like a normal behaviour if you have in your CSS
scroll-behavior: smooth; on html or body tag.
I am not sure why it is working in Firefox, it looks like a bug. Safari and Firefox are working fine on my page https://stark.codes
@erichstark Ah yeah, that's it! 😄
Now the question is how can I keep scroll-behavior: smooth; but still make Elevator.js work as expected...
Maybe it would work to reset the scroll-behavior when the Elevator button is clicked, and add it back when it's done?
That is actually good idea. It could work. Why do you need smooth scroll? If it is for SPA navigation via #some-id, it could be done by some JavaScript code. And with JavaScript it would work also in Safari.
I like to use CSS instead of JS wherever possible. 😄
Since scroll-behavior is reasonably well supported in browsers by now, there is no need for JS based smooth scroll code anymore IMHO.
It works! 🎉 I added these callbacks:
startCallback: function() {
$('html').attr('style', 'scroll-behavior:auto !important')
},
endCallback: function() {
$('html').removeAttr('style')
}
Of course they should check if a style attribute is already present on <html> and add/remove the style accordingly...
Thanks for solving this riddle, @erichstark!
@tholman, do you think it's worth it mentioning this gotcha in the README? Happy to do a PR for that!
Wow! What a journey & amazing catch, haha, wouldn't have got that at all. Definitely worth a readme gotcha at the very least 🙏
Am also guessing that adding the behavior: 'auto' option to the scrollTo events in the library might also do the job here and solve this once and for all.
I tried to get it to work with the behavior parameter by changing https://github.com/tholman/elevator.js/blob/a8332ecf7fa45cf51a177959359780e573205ede/elevator.js#L91 to window.scrollTo({ top: easedPosition, behavior: 'auto' }); but it doesn't seem to work for me...
@manuelmeurer btw I think style attr is readonly.
Better approach should be setting directly the property like
let html = document.querySelector('html');
// proper init ...
startCallback: function() {
html.style.scrollBehavior = 'auto';
},
endCallback: function() {
html.style.scrollBehavior = '';
}