Hey everyone! I'm having an issue while using the library to show a very simple, 1 step tour. I'm trying to have the browser scroll to the highlighted element's position, and while I specify the behavior for "scrollTo" as "smooth", the scroll is simply jumping to every place in chrome.
Here's my setup:
const tourOptions = {
defaultStepOptions: {
cancelIcon: {
enabled: true
},
scrollTo: {
behavior: 'smooth',
block: 'center'
},
arrow: false,
modalOverlayOpeningPadding: 20
},
useModalOverlay: true
}
this.tour = new Shepherd.Tour(tourOptions)
this.tour.addStep({
text: 'Please select a store to ship from',
classes: 'mt-2 ml-3',
attachTo: {
element: '#location-select',
on: 'bottom'
},
buttons: [
{
classes: 'btn btn-primary',
text: 'Got it',
secondary: true,
action: function () {
this.next()
}
}
]
})
this.tour.start()
Interestingly enough, if I add a function as scrollToHandler that, for example, scrolls the user to the top of the screen, the library first takes the user to the element in one hoop and then smoothly scrolls to the top, so it seems like instead of executing my scrollToHandler alone, it's putting the item into view first (without any transition) and then does the scrolling.
Any ideas how to solve this problem?
Thanks!
Hey everyone! I'm having an issue while using the library to show a very simple, 1 step tour. I'm trying to have the browser scroll to the highlighted element's position, and while I specify the behavior for "scrollTo" as "smooth", the scroll is simply jumping to every place in chrome.
Here's my setup:
Interestingly enough, if I add a function as scrollToHandler that, for example, scrolls the user to the top of the screen, the library first takes the user to the element in one hoop and then smoothly scrolls to the top, so it seems like instead of executing my scrollToHandler alone, it's putting the item into view first (without any transition) and then does the scrolling.
Any ideas how to solve this problem?
Thanks!