React-joyride: Autoscroll not working for inner div with overflow: auto

Created on 7 May 2018  路  11Comments  路  Source: gilbarbara/react-joyride

I have placed joyride in my main parent component and it is working really well so far except for this one hangup.

Some tabs have too much content, and as such we have an inner div (common across all pages) that will sometimes scroll.

In these situations, when there are steps that require scrolling, it won't scroll. Instead, the step box just shows up at the bottom of the page. This is likely because it is treating the window as the full page, since Joyride is not being rendered in that local component, it has no way of knowing it needs to scroll down since that main outer div is just set to 100vh.

Any idea how to overcome this obstacle?

Most helpful comment

Vertical scrolling still isn't working in 2.0.5 with an overflow div (and without). I've set scrollToSteps={true} in the Joyride component but it still doesn't seem to want to scroll all of the way down... Any suggestions?

All 11 comments

Hey @MichaelA59

Which version are you using?

@gilbarbara

Version 1.11.2

Autoscroll doesn't work in V1.
Try v2 and let me know if it doesn't work.
npm i react-joyride@next

Thanks I'll look into that!

@MichaelA59
I've update the README with the new setup and documentation.

There's a Migration from 1.x document to help with the transition. If you find any new information that could be helpful to add to it, let me know

Thanks man. I actually ended up sticking with V1 for simplicity and time's sake. Also, to do the scrolling, I just had a callback get triggered for a specific step which ran an autoscroll in the window which solved my issue. Thanks for the help!

@gilbarbara I tried using v2 and am having issues with inner/child containers scrolling horizontally to their targets. See the forked demo below, on the scroll demo tab:

https://codesandbox.io/s/34lq26p2rp

Thanks for this library and for your help!

@xveganxxxedgex
hey, I don't plan to implement horizontal scroll, since this is too edge case.
Feel free to open a PR.

Vertical scrolling still isn't working in 2.0.5 with an overflow div (and without). I've set scrollToSteps={true} in the Joyride component but it still doesn't seem to want to scroll all of the way down... Any suggestions?

+1

Any update?

Was this page helpful?
0 / 5 - 0 ratings