在react js中恢复滚动位置

Question

我试图在React中获得div的滚动位置。我试着让窗口的滚动值，值总是0。

handleScrollPosition(e){
sessionStorage.setItem("scrollPosition", this.myRef.current!.scrollTop.toString());
};
<SearchListWrapper className="TestSL" ref={this.myRef}  onScroll={this.handleScrollPosition} >
<StyledLink onClick={ () =>{ this.onClickResult(); } } >
</StyledLink>
</SearchListWrapper>

单击StyledLink的新页面被加载。当我从新加载的页面返回(使用浏览器的后退按钮)时，我想要恢复SearchListWrapper上滚动的位置。

Answer 1

如果你想要滚动页面的位置，你所做的应该是工作的，但提醒你，你不会得到滚动，直到你滚动整个页面的高度

如果你想获得元素相对于页面的位置，你可以使用这个方法:getBoundingClientRect().top。在JavaScript中，可以这样使用:

document.getElementById(element).getBoundingClientRect().top;

但是在React中，你不应该以这种方式引用元素。你应该使用useRef来指定你想要定位的元素然后使用

yourRef.current.getBoundingClientRect().top

例如:

export default function App() {
const divRef = React.useRef();
if (divRef) {
console.log(divRef.current.getBoundingClientRect().top);
}
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2> Start editing to see some magic happen!</h2>
<div ref={divRef}>Text</div>
</div>
);
}

另一种解决方案是:使用Reactjs获取滚动位置

Answer 2

解决方案

handleScrollPosition(e){
const scrollTop = document.getElementById("TestSL").scrollTop;
//use scrollTop here
}

<SearchListWrapper id="TestSL" onScroll={this.handleScrollPosition} >