Scroll Offset Incorrect

[jkollin14]

I implemented the component as such:

``

Now, when the v-tour displays, it autoscrolls to the center of it so that the top of the window cuts off half of the popper box. Any ideas about what may be causing this / recommended fixes? Thanks.

[asmaps]

I've got the same problem.

[HoldenCreative]

Same problem here.

[HoldenCreative]

Hey folks,

While I wasn't able to fix the source issue, I did identify a few workarounds that may help.

1. Move the tour to a lower position in the parent HTML/component, ideally as close the closing tag as possible. Combining this approach with a preferred placement of position: bottom reduced the issue significantly for me.
2. Do not target any element with a style of position:relative, or a child element of a container with the same style. Steps are positioned absolutely, so you're introducing a new positioning context. Would love to see a solve for this.
3. Similarly, the plugin will identify the scroll parent - the first ancestor element that has a scrollable overflow property, and then scroll it regardless of that element's content. So watch out for responsive tables, sidebar menus with overflow, et al.
4. For target elements which are near the top of the page, use the undocumented parameter enableScrolling. Just be aware that is is best used with similarly positioned elements, otherwise, you'll negate scrolling back up the page on "previous" actions. e.g.:

      {
          target: '[data-vtourid="my-vtour-id"]',
          content: `<h6>A heading</h6><p>some additional copy</p>`,
          params: {
            placement: 'bottom',
            enableScrolling: false
          }
        }

[yaliv]

I like the scrolling effect, but I think it's unnecessary to scroll when the target element is currently visible (within window.scrollY and window.scrollY + window.innerHeight).

The other problem is when my web page has a floating header (position: fixed), the target element is always go behind the header. I hope I can set an option like:

myOptions: {
  scrollOffset: 100
}

[wiadev]

@yaliv Was your suggestion addressed in new releases?

[yaliv]

I don't see any new releases yet: https://github.com/pulsardev/vue-tour/releases

Besides, I'm not using vue-tour for the time being.

[iShotFT]

Hello there,

I ran into the same issue and looked into the code.

It is already possible to add an offset, however this is not defined in the steps of a tour but rather as a property of each step. This possibility is also not documented at all (or at least nowhere I've looked):

        steps: [
          {
            target: '#v-step-0',
            content: `Discover <strong>Vue Tour</strong>!`
            offset: -200, // push the page 200px lower than the actual element
          },
          {
            target: '.v-step-1',
            content: 'An awesome plugin made with Vue.js!'
            offset: 500, // push the page 500px higher than the actual element
          },
        ]

Using 'offset: -200' on each of my steps I was able to offset the tour with 200px from the top. This was required because I have a 'sticky' header that follows you around on the page when you scroll. Working great now!

[xrei]

offset: num is not working.

[silverspectro]

not working for me neither.

[samrat-ghosh-13]

Offset: Num is not working for me. Anybody else facing this?

[ahoura]

offset works great, make sure you add the attr to step NOT step.params

[fyljy574]

offset 效果很好，确保将 attr 添加到 step NOT step.params

我试了，没用啊，用官方的示例html试的，不行，vue版本2.6.14

[leeyea]

offset 效果很好，确保将 attr 添加到 step NOT step.params

我试了，没用啊，用官方的示例html试的，不行，vue版本2.6.14

@fyljy574 同样无效果，请问你解决了吗？

[leuzindev]

For use Offset, its required use params: { enableScrolling: true, },

Exemple

`steps: [

      {
        target: '.v-step-0',
        offset: -100,
        header: {
          title: 'Bem-vindo ao integrador 2.1',
        },
        params: {
          enableScrolling: true,
        },
        content: 'tour content',
      },]`