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

Infinite scroll up and down (with :root { scroll-behavior: smooth } css) #24

Closed
slaweet opened this issue Aug 19, 2021 · 4 comments · Fixed by #25
Closed

Infinite scroll up and down (with :root { scroll-behavior: smooth } css) #24

slaweet opened this issue Aug 19, 2021 · 4 comments · Fixed by #25

Comments

@slaweet
Copy link
Contributor

slaweet commented Aug 19, 2021 •
edited
Loading

Expected behaviour

Clicking the scroll top button scrolls up

Actual behaviour

Clicking the scroll top button scrolls up and down infinitelly
dodgy-scroll-to-top

Environment Info:

System:
OS: Linux 5.4 Ubuntu 18.04.5 LTS (Bionic Beaver)
CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
Binaries:
Node: 16.4.0 - ~/.nvm/versions/node/v16.4.0/bin/node
Yarn: 1.22.5 - ~/.yarn/bin/yarn
npm: 7.18.1 - ~/.nvm/versions/node/v16.4.0/bin/npm
Browsers:
Firefox: 91.0
npmPackages:
ts-vue-plugin: 0.1.3 => 0.1.3
typescript: 4.3.5 => 4.3.5
vue: 2.6.14 => 2.6.14
vue-scroll-up: 1.0.3 => 1.0.3
bootstrap: 5.1.0 => 5.1.0
bootstrap-vue: 2.21.2 => 2.21.2
slaweet added a commit to kryptoslogic/vue-scroll-up that referenced this issue Aug 19, 2021
@slaweet
Prevent infinite scroll up and down
89a2fca 
Resolves runkids#24

 ## What was the problem?

For some reason, `window.scrollY` is not 0 right after calling
`window.scrollTo(0, 0)`, so the `step` function is called infinitely.

 ## What is the solution?

`return` from `step` function after `window.scrollTo(0, 0)`
@slaweet slaweet mentioned this issue Aug 19, 2021
Merged
@slaweet slaweet changed the title Infinite scroll up and down Infinite scroll up and down (with bootstrap v5) Aug 19, 2021
@slaweet
Copy link
Contributor Author

slaweet commented Aug 19, 2021

I investigated the issue a bit and it seems to be only happening with bootstrap v5, I had bootstrap v4 previously and it worked fine.

@runkids
Copy link
Owner

runkids commented Aug 19, 2021

Hi @slaweet , thanks your report. I will check this issue.

@slaweet
Copy link
Contributor Author

slaweet commented Aug 20, 2021

Thank you @runkids. I created a reproduction repo to make it easier to check. The 3 commits should illustrate the issue nicely: https://github.com/slaweet/vue-scroll-up-and-down-issue/commits/main

  • init default vue-cli app
  • Add vue-scroll-up dependency - works as ecpected
  • Add bootstrap@v5 dependency - now this issue happens

@slaweet
Copy link
Contributor Author

slaweet commented Aug 20, 2021

I pinned the issue down to bootstrap setting :root { scroll-behavior: smooth; } css
https://github.com/twbs/bootstrap/blob/f4fd27118fb2b384968068f66361f020a0996a1a/dist/css/bootstrap-reboot.css#L15-L17

@slaweet slaweet changed the title Infinite scroll up and down (with bootstrap v5) Infinite scroll up and down (with :root { scroll-behavior: smooth } css) Aug 20, 2021
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

Successfully merging a pull request may close this issue.

Prevent infinite scroll up and down kryptoslogic/vue-scroll-up
2 participants
@slaweet @runkids