英文:
ReactJS scroll offset incorrect
问题
如何在长国家列表上方有固定定位元素时修复滚动位置？我已创建一个示例以展示问题（下面的帖子）。
用例：如果我点击“肯尼亚”国家，页面会滚动到“红色区域”（页脚文本）。不幸的是，无法使其滚动到“绿色区域”，即所点击的国家内容所在的地方。对于以“A”字母开头的国家来说，它运作正常（某种程度上）... 滚动位置不在固定元素下方。
https://codesandbox.io/s/j69bwo?file=/src/App.js
将不胜感激地接受任何帮助。
英文:
How could I fix scroll position on country list when there is sticky positioned element on top of long item list. I have created a sandbox to show the problem (below post).
Use case: If I click on country "Kenya", page scrolls in to "red zone" (footer text). Sadly, cannot make it scroll up to "green zone", where the country content is what ever country is clicked. It works fine for the countries starting with "A" letter (sort of).. scroll position is not below sticky element.
https://codesandbox.io/s/j69bwo?file=/src/App.js
Any help will be appreciated.
答案1
得分: 1
使用scrollIntoView方法选择国家后，将页面滚动到wrapper元素，从而解决折叠时国家列表的高度会强制页面滚动到底部的问题。
英文:
The countries list height when collapsed will force the page to scroll to the bottom.
One solution is using scrollIntoView method to scroll to the wrapper element after choosing a country.
const wrapperRef = useRef();
const showCountry = (item) => {
setView({ list: false, item: true });
setItem(item);
wrapperRef.current.scrollIntoView();
};
// code...
<div className="wrapper" ref={wrapperRef}>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论