ReactJS - Window.ScrollTo（）不在辅助滚动条上工作

Question

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

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

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

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

提前致谢！

Answer 1

您需要获取ListContainer的参考，然后在其上设置scrollTop

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

并像

一样使用它

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

Answer 2

我尝试了你的代码，我得到了一个像它应该的滚动条。

要获得自动滚动到底部的内容，我会做类似的事情：

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

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

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

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