在 React JS 应用程序中滚动时滚动水平菜单答案

【问题标题】：Scrolling horizontal menu while scrolling in React JS app在 React JS 应用程序中滚动时滚动水平菜单
【发布时间】：2021-12-04 14:16:49
【问题描述】：

我正在处理我的 React JS 应用程序中的水平菜单问题。

我使用 react-scroll 进行平滑滚动和scroll spy，所以菜单链接在遇到该部分时会突出显示。

一切正常，但我需要在 Y 方向移动菜单，当点击菜单链接超出视口的部分时。

我在https://clever-borg-a6bcdb.netlify.app/ 上传了演示。 问题很明显，尤其是在移动版网络上。

有什么简单的方法，如何移动菜单，使当前部分的菜单项总是在视口的开头（左侧）？

谢谢。

代码如下：

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>
        </>
        
    )
}

【问题讨论】：

标签： reactjs scrollspy react-scroll

【解决方案1】：

所以解决这个问题的方法是为你的 Link 元素使用 onSetActive 选项。在此选项中，您应该调用一个函数，该函数可以滚动到视图中：

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

要发挥作用，li 元素上必须有 id 属性，它是 Link 组件的父元素。

【讨论】：