reactjs - 菜单溢出 :scroll - position selected element center

Question

我有带溢出的垂直导航:滚动，所以在移动设备上，除了您滚动到的菜单项外，菜单项被隐藏。

在页面刷新时或者如果我选择不同的页面，滚动会再次从头开始。

我想要的是如果与页面匹配，则相应的元素始终出现在 View 中。

有没有办法使用 CSS 使所选元素居中？比如我可以强制滚动到所选菜单所在的位置吗？

Answer 1

据我所知，单靠 CSS 是做不到这一点的。您需要使用 javascript 来设置滚动位置。我认为您可以获得想要居中的元素的滚动位置，然后使用它滚动到正确的位置。

checkout :

window.scroll() - https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

和

.scrollTo() - https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop