1

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

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

一切正常，但我需要在 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>
        </>
        
    )
}
4

1 回答 1

0

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

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

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

于 2021-12-16T11:20:45.220 回答