ReactJS - Window.ScrollTo() 在辅助滚动条上不起作用

Question

对于我的ReactJS项目，我有一个简单的文本列表(使用<ul>和<li>标签(，它有自己的滚动条来浏览列表，但不是整个页面。我能够用这个 css 代码做到这一点：

#List-container {
max-height: 425px;
overflow: hidden;
overflow-y: scroll;
}

对于我的项目，我需要它自动向下滚动到列表底部。我尝试使用window.scrollTo()但它不起作用，我很确定这是因为有一个辅助滚动条。

有谁知道我如何使用window.ScrollTo()，或者知道任何替代方案？

提前感谢！

Answer 1

我尝试了您的代码，并且得到了一个滚动条。

要让某些东西自动滚动到底部，我会做这样的事情：

let wHeight = window.innerHeight;
window.scrollY = wHeight;

这是我能想到的滚动到页面底部的最简单方法。您可以将窗口替换为要在 DOM 中选择的任何内容。

要滚动到列表底部，只需写：

let divHeight = document.getElementById('List-container');
window.scrollY = divHeight.offsetHeight;

Answer 2

您需要获取ListContainer的引用，然后像这样设置scrollTop

<ListContainer ref={ref => this.listContainer = ref} />

并像使用它一样使用

const container = ReactDOM.findDOMNode(this.listContainer);
container.scrollTop = "125px"