How to make a double scroll?

[afuno]

trafficstars

I have a content zone and a sidebar zone. I need to implement automatic scrolling to the desired item in the menu in the sidebar, as well as to the desired block inside the content.

Initially, I only implemented scrolling inside the content.

main.js:

// ...
import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo)
// ...

posts_list.vue (inside created()):

this.$scrollTo(`#js-post-${this.activePost.id}`, { offset: -100 })

It all worked.

But I have a list of posts in the sidebar. I also need to scroll in the sidebar. At this stage, a problem arose.

Your documentation says that I can use the container option. I wrote this for the sidebar (sidebar_posts_list.vue file):

methods: {
  // @click="scrollTo(post)" in v-for
  scrollTo(post) {
    this.$scrollTo(`#js-post-${post.id}`, { container: '#js-content', offset: -100 })
    this.$scrollTo(`#js-sidebar-post-${post.id}`, { container: '#js-sidebar' })
  }
}

This does not work. No errors, nothing. If replace the values (in container) with body, then everything starts to work, but "twitching". It is impossible to use twice one identifier as everything will "twitch". But those identifiers that I wrote do not work at all.

What is the problem?

[afuno]

Here we are talking more about adaptive layout. When the version is for the desktop, there should be a scroll in the sidebar, but it will not be noticed, since there will be nothing to scroll.

But if there is a mobile version, then the sidebar will become on one line, and therefore there will be horizontal scrolling.

[rigor789]

Check the docs on simultaneous scrolling https://vue-scrollto.netlify.com/docs/#simultaneous-scrolling

[afuno]

@rigor789 Thank. In the coming days I will try this. I will write about the result.