CODEWITHSUNDEEP
reactjsreact-hooksreact-refjs-scrollintoview
mavrk
mavrk

Reputation: 51

React scrollIntoView() not working with ref

I have a react functional component defined as

    export const NavMenuHorizontal: React.FunctionComponent<NavMenuProps> = (
      props
    ) => {         
        const selectedItemRef = React.createRef<HTMLDivElement>();
        React.useEffect(() => {
          selectedItemRef.current?.scrollIntoView({
            behavior: "smooth",
            inline: "center",
          })
        });

        return (
              <List>
              {map(...) => (
                  <div ref={isActive ? selectedItemRef : undefined}>
                     some text 
                  </div>
               )}
              </List>
        );
    };
//isActive is true for only one item in the map

I am trying to make the selected list item scroll into view using a ref but unable to get the expected result. However, if I try to add debug breakpoint at the hook, it's working as expected and scrolling the element in viewport.

I also tried wrapping my scrollIntoView inside a setTimeout() which works but it scrolls it more than once and leads to a jarring effect.

Upvotes: 1

Views: 1289

Answers (0)

Related Questions