Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Slow scrolling in Chrome #138

Open
manuelmeurer opened this issue Jul 17, 2020 · 13 comments
Open

Slow scrolling in Chrome #138

manuelmeurer opened this issue Jul 17, 2020 · 13 comments

Comments

@manuelmeurer
Copy link

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?
@manuelmeurer manuelmeurer changed the title Slow scrolling Slow scrolling in Chrome Jul 17, 2020
@tholman
Copy link
Owner

tholman commented Jul 17, 2020

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)

@manuelmeurer
Copy link
Author

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... :(

@erichstark
Copy link

erichstark commented Aug 27, 2020 •
edited
Loading

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

@manuelmeurer
Copy link
Author

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

@erichstark
Copy link

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.

@manuelmeurer
Copy link
Author

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.

@manuelmeurer
Copy link
Author

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

@manuelmeurer
Copy link
Author

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!

@tholman
Copy link
Owner

tholman commented Aug 28, 2020

Wow! What a journey & amazing catch, haha, wouldn't have got that at all. Definitely worth a readme gotcha at the very least 🙏

@tholman
Copy link
Owner

tholman commented Aug 28, 2020

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.

@manuelmeurer
Copy link
Author

I tried to get it to work with the behavior parameter by changing

elevator.js/elevator.js

Line 91 in a8332ec

window.scrollTo(0, easedPosition);
to window.scrollTo({ top: easedPosition, behavior: 'auto' }); but it doesn't seem to work for me...

@erichstark
Copy link

erichstark commented Sep 1, 2020 •
edited
Loading

@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 = '';
            }

@manuelmeurer
Copy link
Author

document.querySelector('html').style.scrollBehavior works for me. :)

JuanSierra99 added a commit to JuanSierra99/juansierra99.github.io that referenced this issue Jan 30, 2024
@JuanSierra99
fixed elevator.js for chrome
c4697a5 
it was not scrolling properly. found solution here, but seems they never updated the repo.
tholman/elevator.js#138
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@manuelmeurer @tholman @erichstark