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

Question

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

我使用 react-scroll 来平滑滚动和滚动间谍，所以菜单 link 在遇到该部分时会突出显示。

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

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

Answer 1

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

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

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

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

Scrolling horizontal menu while scrolling in React JS app

scrollspy

reactjs

react-scroll