Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Smooth scrolling not working? #788

Closed
dragonautdev opened this issue Feb 3, 2020 · 10 comments
Closed

Smooth scrolling not working? #788

dragonautdev opened this issue Feb 3, 2020 · 10 comments
Assignees
Labels

Comments

@dragonautdev
Copy link

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!

@dragonautdev
Copy link
Author

As an additional comment to this, I can say the issue was introduced with version 6.0.0, because version 5.0.1 was working fine in this regard.

@RobbieTheWagner
Copy link
Member

We're working hard on v7 currently, and will hopefully be able to fix this and any other regressions.

@dragonautdev
Copy link
Author

@rwwagner90 that's cool. thank you. In the meantime, do you happen to have v5 documentation handy? I noticed it does not have said bug, but the API seems a bit different than V6 (for instance, buttons are not working the v6 way).
Thanks!

@RobbieTheWagner
Copy link
Member

We do not have previous docs, but v7 should be out very soon. Apologies for the delay! @chuckcarpenter can we ensure this works with your PR?

@ronpeled
Copy link

Hopefully we get v7 soon and this is fixed. That would be great! Much appreciated!

@RobbieTheWagner
Copy link
Member

@ronpeled @srodriki we've merged in popper v2 and we're close to v7. If you want to try out the master branch, I think it should fix things for you!

@chuckcarpenter
Copy link
Member

This works in MASTER and will be released today.

@dragonautdev
Copy link
Author

Thanks a lot everyone! We will be checking this one out today!

@hendsleemMans
Copy link

any updates ?

@RobbieTheWagner
Copy link
Member

@hendsleemMans this has been working for quite awhile.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants