HiDeoo / intro.js-react

Intro.js react wrapper

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

scrollToElement doesn't works as expected - page elements are not visible.

Dreamerset opened this issue · comments

Need hints/ideas/help in resolving the issue below.

It doesn't seems as expected behavior and I haven't found yet any none intro.js workaround/hack.

Problem: When next intro step scrolls the page to the corresponding element, the scrolled part of the page is not visible although the element is selected and the step description is presented.

Web browser: Chrome Version 102.0.5005.63 (Official Build) (64-bit)
OS: Windows 10 Pro
intro.js-react version: 0.6.0
intro,js configuration:
<Steps enabled={stepsEnabled} steps={steps} initialStep={0} onExit={() => setStepsEnabled(false)} options={{ hidePrev: true, disableInteraction: false, exitOnOverlayClick: true, showStepNumbers: false, scrollToElement: true, overlayOpacity: .6, showBullets: true, showButtons: true, nextToDone: true, exitOnEsc: true, showProgress: false, keyboardNavigation: true, prevLabel: "Back", nextLabel: "Next", doneLabel: "Done", }} />
step8
step9

I cannot manage to find a repro of the issue, here is a CodeSandbox example with a tour including a scroll.

Maybe it's related to your specific layout / CSS as the intro.js repo contains various issues regarding scroll issues.

If you're still having this issue, feel free to re-open with a small repro example.