React-joyride: disable scrolling not working.

[burtonator]

I'm trying to target 'body' with a splash intro on the tour but my body is bigger than the screen so the overlay has a scrollbar.

I tried disableScrolling but that doesn't work.

Then I tried doing something like:

                overlay: {
                    maxHeight: '100%'
                }

in 'styles' but the CSS params aren't being applied to the final style.

I tried overflow: hidden too.

IS this a bug or am I doing something wrong?

[gilbarbara]

disableScrolling has other purpose as described in the docs: Disable auto scrolling between steps.

The overlay is positioned on the top of your content and doesn't have scroll at all, since it has overflow: 'hidden' already set.

Your body probably have scroll and this library won't change that. You need to disable scroll by yourself for this particular step. You can use another package for that, like disable-scroll or some other CSS only technique.

[burtonator]

This is still a problem and not sure exactly what's happening

The "#react-joyride-portal" element needs to have

max-height: 100%

...

and the element below needs to be deleted and then the scroll vanishes.

I think it's the beacon but I have the beacon disabled. The scroll is being shown because the body is selected but the beacon is inserted BELOW the content.

If I delete this or set it to display none the scrollbar goes away.

<span x-placement="center" style="cursor: help; display: inline-flex; flex-direction: column; z-index: 100; position: absolute; visibility: hidden; will-change: transform; top: 0px; left: 0px; transform: translate3d(818px, 1515px, 0px);"><button class="react-joyride__beacon" type="button" data-test-id="button-beacon" aria-label="Open the dialog" title="Open the dialog" style="background-color: transparent; border: 0px; border-radius: 0px; color: rgb(85, 85, 85); cursor: pointer; font-size: 16px; line-height: 1; padding: 8px; -webkit-appearance: none; display: inline-block; height: 36px; position: relative; width: 36px; z-index: 100;"><span style="animation: joyride-beacon-inner 1.2s ease-in-out infinite; background-color: rgb(0, 123, 255); border-radius: 50%; display: block; height: 50%; left: 50%; opacity: 0.7; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 50%;"></span><span style="animation: joyride-beacon-outer 1.2s ease-in-out infinite; background-color: rgba(0, 123, 255, 0.2); border: 2px solid rgb(0, 123, 255); border-radius: 50%; box-sizing: border-box; display: block; height: 100%; left: 0px; opacity: 0.9; position: absolute; top: 0px; transform-origin: center center 0px; width: 100%;"></span></button></span>

[burtonator]

I have disableBeacon: true but I think it's still shown just visibility: hidden. Might have to display: none it?

This isn't a massive problem but it's a bit annoying as my page now has two scrollbars on the right when the tour is active.

[burtonator]

ok.. a work around I found was to just use 'header' which is smaller than the entire page in my app but always present.

Joyride is great btw.. Hope it doesn't seem like I'm complaining.

Already doubled our cohort analysis on the 2nd day. Hoping to get it much higher.

[gilbarbara]

Yeah, no problem. :)

But it is impossible to debug an app without seeing it. Most of the time it's a CSS issue that this package can't and shouldn't have to handle.