Open jkollin14 opened 5 years ago
I've got the same problem.
Same problem here.
Hey folks,
While I wasn't able to fix the source issue, I did identify a few workarounds that may help.
position: bottom
reduced the issue significantly for me.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.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.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
}
}
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
}
@yaliv Was your suggestion addressed in new releases?
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.
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!
offset: num
is not working.
not working for me neither.
Offset: Num is not working for me. Anybody else facing this?
offset works great, make sure you add the attr to step NOT step.params
offset 效果很好,确保将 attr 添加到 step NOT step.params
我试了,没用啊,用官方的示例html试的,不行,vue版本2.6.14
offset 效果很好,确保将 attr 添加到 step NOT step.params
我试了,没用啊,用官方的示例html试的,不行,vue版本2.6.14
@fyljy574 同样无效果,请问你解决了吗?
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',
},]`
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.