实现一个需求,当页面跳转到另一个页面时,使用react-router
跳转回原页面,滚动条需要停留在原有位置。滚动条所在元素是antd中layout部分,ref半天取不到dom元素,索性直接用id取得dom元素。
let defaultScrollTop = 0;
componentDidMount() {
// 组件挂载时将defaultScrollTop赋值滚动条的scrollTop
let latoutNode = document.getElementById("latoutRef");
if (latoutNode) {
latoutNode.addEventListener("scroll", e => {
latoutNode.scrollTop = e.target.scrollTop;
});
latoutNode.scrollTop = defaultScrollTop;
}
}
componentWillUnmount() {
// 组件卸载时移除监听事件,同时拿到defaultScrollTop
let latoutNode = document.getElementById("latoutRef");
if (latoutNode) {
latoutNode.removeEventListener("scroll", e => {
latoutNode.scrollTop = e.target.scrollTop;
});
defaultScrollTop = latoutNode.scrollTop;
}
}
网友评论