我有一个弹出列表，其中div包含子divs 的垂直列表。我添加了向上/向下键盘导航来更改当前突出显示的哪个孩子。
现在，如果我按下向下键的次数足够多，突出显示的项目将不再可见。如果滚动视图，则向上键也会发生相同的情况。
在React中自动将孩子滚动div到视图中的正确方法是什么？
如何滚动div在ReactJS中可见？
第3973篇《如何滚动div在ReactJS中可见？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共3个回答
在keyup / down处理程序中，您只需要设置scrollTop要滚动的div 的属性即可使其向下（或向上）滚动。
例如：
JSX：
<div ref="foo">{content}</div>
上/下键盘处理程序：
this.refs.foo.getDOMNode().scrollTop += 10
如果您执行与上述类似的操作，则div将向下滚动10个像素（假设div设置为溢出auto或scroll在CSS中，并且您的内容当然在溢出）。
您将需要对此进行扩展，以找到要向下滚动div的滚动div内元素的偏移量，然后修改scrollTop使其滚动足够远以根据其高度显示元素。
看一下MDN的scrollTop和offsetTop定义：
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetTop
要以@Michelle Tilley的答案为基础，如果用户的选择发生更改，我有时想滚动，因此我触发componentDidUpdate。我还做了一些数学运算来弄清楚滚动的距离以及是否需要滚动，对我来说，这类似于以下内容：
componentDidUpdate() {
let panel, node;
if (this.refs.selectedSection && this.refs.selectedItem) {
// This is the container you want to scroll.
panel = this.refs.listPanel;
// This is the element you want to make visible w/i the container
// Note: You can nest refs here if you want an item w/i the selected item
node = ReactDOM.findDOMNode(this.refs.selectedItem);
}
if (panel && node &&
(node.offsetTop > panel.scrollTop + panel.offsetHeight || node.offsetTop < panel.scrollTop)) {
panel.scrollTop = node.offsetTop - panel.offsetTop;
}
}相似问题
问题类别
我只是为其他人在React中搜索Scroll-To功能添加了一点信息。我已经绑定了几个库来为我的应用程序执行Scroll-To，在我找到用例卷轴之前，都没有用到我的用例，所以我以为我会继续下去。https://github.com/bySabi/react-scrollchor