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.

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

More info on the scrollToComponent function #10

Closed
lindseybradford opened this issue Feb 21, 2018 · 1 comment
Closed

More info on the scrollToComponent function #10

lindseybradford opened this issue Feb 21, 2018 · 1 comment

Comments

@lindseybradford
Copy link

lindseybradford commented Feb 21, 2018

Hi there,

Great tool, thanks for building!

Do you have a recommended method for modifying the existing scrollToComponent function to implement a smooth scrolling animation?

As a newbie, I'll inevitably use a duct-tape approach, and I wanted to see if there was a more elegant solution first.

Thanks!

@chrishurlburt
Copy link
Owner

Hi, thanks for using ScrollView!

For smooth scrolling, you can use a combination of $scrollview.getComponentLocation('someKey') and window.scroll with a scroll-behavior set. It would look something like this:

const scrollLocation = $scrollview.getComponentLocation('someKey')
window.scroll({
  top: scrollLocation,
  left: 0,
  behavior: 'smooth'
})

Here's a pretty good article for explaining the window.scroll bit: https://css-tricks.com/snippets/jquery/smooth-scrolling/

Hopefully that accomplishes what you're looking for!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants