chrishurlburt/vue-scrollview

More info on the scrollToComponent function

lindseybradford opened this issue · 1 comments

lindseybradford commented

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 commented

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!

  • 👍1