Not scrolling elements into view when I use reactour selector in list element

See original GitHub issue

Reactour is not auto-scrolling to elements.
I send reactour selector as props in list(map) component.

{tabs.map((tab) => (
        <Tab
          key={tab.id}
          icon={tab.icon}
          label={tab.label}
          data-tut={tab.tour || ''}
          className={classes.tab}
        />
 ))}

Any idea what could be preventing the scrolling?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
acomitocommented, Dec 13, 2020

I’m also having the same issue.

Although, mine isn’t fixed by removing scroll-behavior: smooth;

I’m using it in a big project, so getting a reproduction may be tough.

Update:

It seems to work when I remove these from html/body

    overflow-x: hidden;
    scroll-behavior: smooth;

ended up keeping my normal html css, but also using something like this in my tour component

  useEffect(() => {
    if (isTourOpen) {
      document.documentElement.style.overflowX = 'inherit';
      document.documentElement.style.scrollBehavior = 'inherit';
    } else {
      document.documentElement.style.overflowX = 'hidden';
      document.documentElement.style.scrollBehavior = 'smooth';
    }
  }, [isTourOpen]);
0reactions
aatif24commented, Aug 13, 2020
Read more comments on GitHub >

github_iconTop Results From Across the Web

Not scrolling elements into view when I use reactour selector ...
Reactour is not auto-scrolling to elements. I send reactour selector as props in list(map) component. {tabs.map((tab) => ( <Tab key={tab.id} ...
Read more >
React list of elements not scrolling - Stack Overflow
The style of the container has overflow: scroll however the scroll doesn't show anything else than the initially visible items. I wonder if...
Read more >
How to Trigger a Function when Scrolling to an Element in ...
We'll first see how we can do this manually by using the Intersection Observer API directly, then we'll see how we can make...
Read more >
body-scroll-lock - npm
Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element ( ...
Read more >
angular-ui-tour - npm Package Health Analysis - Snyk
angular-ui-tour For more information about how to use this package see README ... Note: this does not scroll the scrollable element into view....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found