停止react显示更多按钮滚动到内容底部
停止react显示更多按钮滚动到内容底部
提问于 2020-09-02 17:43:03
我有下面的todo组件。它的目的是显示10个待办事项，当单击More时，还会显示10个待办事项。
const ToDoList = ({ todos }) => {
const [viewCount, setViewCount] = useState(1);
const handleViewMore = (e) => {
setViewCount(viewCount + 1);
};
return (
<div>
<div>
{
todos.slice(0, viewCount * 10)
.map((todo, index) => (
<ToDo {...todo} key={index} />
))
}
</div>
<button onClick={handleViewMore}>More</button>
</div>
);
};问题是，当点击More时，额外的待办事项会被添加，但窗口滚动仍然带有按钮，在添加的待办事项下面。
例如，如果10个待办事项的window.scrollY为1000，则当我单击More时，winodw.scrollY现在为2000，但我希望它保持为1000，以允许用户滚动浏览下10个待办事项。
值得注意的是，如果我将按钮更改为a或span，则不会发生这种情况。
有什么想法吗？谢谢!
这是这个问题的一个codesandbox版本- https://codesandbox.io/s/dry-snowflake-wl2h8?file=/src/App.js
我已经包含了一个More Broken按钮和一个More Expected跨度。我想让按钮的行为像span一样。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-09-02 19:58:32
这很奇怪，这是一些新的行为，只有在最新版本的chrome (85，也许84)中才会发生。在您的情况下，所有其他浏览器都保持滚动位置。这可能是一个bug或一个功能，不确定，同时你可以
将onClick更改为onMouseDown并
const handleViewMore = (e) => {
e.preventDefault()
setViewCount(viewCount + 1);
};Stack Overflow用户
发布于 2020-09-02 18:02:24
您可以使用以下命令：
useEffect(() => {
window.scrollTo(0, 0)
}, [viewCount])Stack Overflow用户
发布于 2020-09-02 18:25:41
您可以在单击更多按钮之前保持当前的滚动位置并回滚到该位置
const [viewCount, setViewCount] = useState(1)
const [currentScrollTop, setCurrentScrollTop] = useState(0)
const handleViewMore = (e) => {
setCurrentScrollTop(document.documentElement.scrollTop)
setViewCount(viewCount + 1)
}
useEffect(() => {
window.scrollTo(0, currentScrollTop)
}, [currentScrollTop])Codesandbox链接
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63702869
复制相关文章
相似问题
腾讯云开发者
