Scrolling horizontal menu while scrolling in React JS app

I’m dealing with problem with horizontal menu in my React JS application.

I use react-scroll for smooth scroll and scroll spy, so the menu links are highlighted when encountering the section.

Everything works fine, but I need to move the menu in the Y direction, when hitting the section, where the menu link is out of the viewport.

I uploaded the demo on https://clever-borg-a6bcdb.netlify.app/. The problem is visible especially when on mobile version of the web.

Is there any easy way, how to move the menu, so the menu item of the current section is always at the start of the viewport (on the left side)?

Thank you.

Code below:

function SubmenuCategory() {
    return (
                    <section className="submenu">
                        <div className="container flex" id="submenuContainer">
                            <nav>
                                <ul>
                                    <li className="item"><Link activeClass="active" to="category1" smooth={true} duration={500} spy={true} exact={true} offset={-70}>category1</Link></li>
                                    <li className="item"><Link to="category2" smooth={true} duration={500} spy={true} exact={true} offset={-70}>category2</Link></li>
                                    <li className="item"><Link to="category3" smooth={true} duration={500} spy={true} exact={true} offset={-70}>category3</Link></li>
                                    <li className="item"><Link to="category4" smooth={true} duration={500} spy={true} exact={true} offset={-70}>category4</Link></li>
                                    <li className="item"><Link to="category5" smooth={true} duration={500} spy={true} exact={true} offset={-70}>category5</Link></li>
                                    <li className="item"><Link to="category6" smooth={true} duration={500} spy={true} exact={true} offset={-70}>category6</Link></li>
                                    <li className="item"><Link to="category7" smooth={true} duration={500} spy={true} exact={true} offset={-70}>category7</Link></li>
                                    <li className="item"><Link to="category8" smooth={true} duration={500} spy={true} exact={true} offset={-70}>category8</Link></li>
                                </ul>
                            </nav>
                        </div>
                    </section>

    )
}

function CategoryContainer() {
    return (
        <>
        <div id="category1" style={{"height": "200px","backgroundColor": "yellow"}}> 
            <h1>Category 1</h1> 
        </div>
        <div id="category2" style={{"height": "200px", "backgroundColor": "orange"}}> 
            <h1>Category 2</h1> 
        </div>
        <div id="category3" style={{"height": "200px","backgroundColor": "yellow"}}> 
            <h1>Category 3</h1> 
        </div>
        <div id="category4" style={{"height": "200px","backgroundColor": "orange"}}> 
            <h1>Category 4</h1> 
        </div>
        <div id="category5" style={{"height": "200px","backgroundColor": "yellow"}}> 
            <h1>Category 5</h1> 
        </div>
        <div id="category6" style={{"height": "200px","backgroundColor": "orange"}}> 
            <h1>Category 6</h1> 
        </div>
        <div id="category7" style={{"height": "200px","backgroundColor": "yellow"}}> 
            <h1>Category 7</h1> 
        </div>
        <div id="category8" style={{"height": "200px","backgroundColor": "orange"}}> 
            <h1>Category 8</h1> 
        </div>
        </>
        
    )
}

So the solution for this problem is to use the option onSetActive for your Link element. In this option you should call for a function, which enables the scroll into view:

 function handleScroll(id){
          document.getElementById(id).scrollIntoView({inline: "center"});
      }

To be functional, there has to be id attribute on the li element, which is parent for the Link component.