我页面上有一个可滚动的组件,但其他部分却不滚动。当我使用不同的组件更改useState值时,我想在此元素内滚动到特定的Y位置。
滚动组件如下:
滚动函数如下:
const scrollMe = useRef();
useEffect(
() => {
if (scrollMe === true) {
scrollPanel.scrollTo(0, 300)
}
},
[ scrollMe ]
);
滚动组件如下:
<div ref={scrollMe} onScroll={(e) => handleScroll(e)}>A mapped array</div>
滚动函数如下:
const handleScroll = (e) => {
if (e.target.scrollTop !== 0) {
setTopBarPosition(true);
} else {
setTopBarPosition(false);
}
};
设置topBarPosition会影响顶部栏的位置。
<div className={`topBar ${topBarPosition === true ? 'topBarToTop' : ''}`}>
<TopBar/>
</div>
而css类topBarToTop可以将topBar移动到页面顶部:
.topBarToTop {
top: 30px;
}
为什么我只得到了 "scrollMe.scrollTo is not a function" 的错误信息?
我制作了一个codesandbox来说明我正在尝试做什么:
scrollMe
引用的位置? - norbitrial