React-joyride: Tour doesn't autoscroll, even when disableScrolling = false

[jbbae]

Expected behavior
Auto-scroll to next step when progressing through a continuous tour.

Actual behavior
Tour continues, but the auto-scrolling doesn't happen (leaving users wondering where it is/if it's a bug).

Steps to reproduce the problem
I have properly set-up Joyride using the migration guide & props stated on Github site:

The tour works fine (continuous, step callbacks, etc.), but this auto-scrolling is the only part that's not working. I looked into the console to see if there was anything, but no luck (it actually proves that I set-up the "disableScrolling = false" correctly:

Not sure why this wouldn't be working (it's a fairly simple set-up), and am lost on where to start... Any thoughts?

Please lmk if you require more details!

React version
16.4.1

React-Joyride version
2.0.0-13

Browser name and version
Chrome, 67.0.3396.99 (64-bit)

Error stack (if available)

If you want to get this issue fixed quickly, make sure to send a public URL or codesandbox example.

[gilbarbara]

Is the scrolling working in the demo?

It's impossible to know what is going on without seeing your setup running...
You can try to remove the props but feels like it's a problem with your CSS.

[andreystarkov]

@gilbarbara

Same problem.

The config is:

const joyrideConfig = {
  scrollToFirstStep: true,
  showProgress: true,
  showSkipButton: true,
  disableOverlay: false,
  disableOverlayClose: false,
  disableScrolling: false
}

const defaultStyles = {
  arrowColor: Colors.menuBlue,
  backgroundColor: Colors.menuBlue,
  beaconSize: 36,
  overlayColor: 'rgba(0, 0, 0, 0.4)',
  primaryColor: Colors.red,
  spotlightShadow: '0 0 15px rgba(0, 0, 0, 0.5)',
  textColor: '#fff',
  zIndex: 100
}

Everything is highlighted fine. But doesn't scroll on step change. Also highlighted (via overlay) area is weirdly moving up on page scroll sometimes. What do you mean at "problem with your CSS"?

[gilbarbara]

@andreystarkov Is the scrolling working in the demo?

[gilbarbara]

@nickbae91 @andreystarkov Are you both working on the same project or it is a different issue?

[andreystarkov]

@gilbarbara ofc no! i just faced with same problem right now in my project.

[MilllerTime]

For what it's worth, I hit this too. Haven't had time to create a reduced test case yet. I feel like I'm playing by the rules though -- I'm curious to see what the cause is.

[jbbae]

@gilbarbara if by demo, you mean https://2zpjporp4p.codesandbox.io/, yes it works fine for me.

I've tried removing the props, fixing them at {false} to get things to work, and ensured I didn't have the CSS file from v1 (per https://github.com/gilbarbara/react-joyride/blob/master/docs/styling.md). Moreover, unlike @andreystarkov 's setup, I haven't configured CSS in any way.

I'm not sure how easy it'll be for me to recreate a minimal reproducible code, but I'll give it a shot. Is there anything in particular (incl. the CSS stuff you suspected) that I should look out for?

[gilbarbara]

@nickbae91 Make sure the body (or any other parent container) doesn't have a fixed height.

body {
    height: 100vh; /* bad */
    min-height: 100vh; /* good */
}

[tmmgn]

I have the same problem, also when scrolling to element by myself and click next i see this

[townmulti]

If the placement is set to bottom, then it will not scroll to show at the bottom but will try to squeeze show at the top. In this case and scrolling the page, the tooltip placement then moves to the bottom. The initial auto scroll does not seem to be triggering.

[gilbarbara]

It's impossible to find the problem without a publicly accesible example.

[townmulti]

Okay this duplicates it for me. Go to Controlled and the tour will start on mount.

https://codesandbox.io/s/morj927qx9

It's possible that scrollToFirstStep has some to do with it.

[julia-otran]

Ive found something:
I think the problem is at modules/dom.js line 168.
The property scrollTop doesn't seem to work. I changed
const { scrollTop } = element;
to

const rect = element.getBoundingClientRect();
const offsetTop = window.pageYOffset || document.documentElement.scrollTop;
const scrollTop = rect.top + offsetTop;

and that did the trick.

I can open a PR to fix this, but i don't know yet if it has side effects.
@gilbarbara what do you think?

[gilbarbara]

@guilherme-otran
The problem is why scrollTop isn't working...
I think your solution only handle page scrolling, not all scrollable elements, right?

[julia-otran]

Good point @gilbarbara.
In fact i noticed that the real thing with problem is in fact modules/dom.js line 119.
Please see:
https://stackoverflow.com/questions/11805955/how-to-get-the-distance-from-the-top-for-an-element/33840267

Do you think we can take this approach?
Another thing is that i could not find an easy way to make this work with custom scroll parents. Do you have any idea?

[ravisraval]

Is there a workaround for now or a recommended previous release to revert to?

[gilbarbara]

@guilherme-otran
No idea. The solution must handle all scenarios, including custom scroll parents.

[charlieharris1]

I'm experiencing the same on Firefox and Safari as well. The first issue was to do with having overflow-x: hidden on the component that wraps all the content on each page of my app. This fix didn't work on its own though, I also had to set scrollToFirstStep to true, as mentioned above by @townmulti.

[charlieharris1]

I think this shows one of the things I'm seeing in my app. I've edited the Basic example and moved the target of the second step to be at the top of the containing div. When you click on the "Let's Go!" button (which now appears further down the page than the original example), it doesn't scroll to the target for the second step: https://codesandbox.io/s/5vmnlwl4yx

[keul]

@charlieharris1 watch out for https://github.com/gilbarbara/react-joyride/issues/376 also. Issues that came from having an overflow CSS rule are also discussed there.

[gilbarbara]

I fixed some of these problems in 2.0.0-rc
I'll release V2 tomorrow so if you can test these scenarios it would be great.
@charlieharris1 your example is working with the new version btw.

[gilbarbara]

2.0.0-rc.1 adds a dirty fix for unused scroll parents with overflow that should handle most cases.
If you still are having problems, let me know

[bertom]

I had the same issue. Was fixed when I set the body, #react-joyride-portal and #react-joyride-step to box-sizing: border-box

[gilbarbara]

@bertom You just need a single statement in you CSS:

*,
*:before,
*:after {
    box-sizing: border-box;
}