ReactJS滚动偏移不正确

mitkmikd  于 2023-02-18  发布在  React
关注(0)|答案(1)|浏览(112)

我怎么能固定滚动位置时,国家名单上有粘性定位元素在顶部的长项目列表。我已经创建了一个沙箱,以显示问题(下面的职位)。
使用案例:如果我点击国家“肯尼亚”,页面滚动到“红区”(页脚文本)。遗憾的是,不能让它滚动到“绿色”,那里的国家内容是什么国家被点击。它的工作很好的国家开始与“A”字母(排序)。滚动位置不低于粘性元素。
https://codesandbox.io/s/j69bwo?file=/src/App.js
任何帮助都将不胜感激。

n9vozmp4

n9vozmp41#

折叠时的国家/地区列表高度将强制页面滚动到底部。
一种解决方案是使用scrollIntoView方法在选择国家之后滚动到wrapper元素。

const wrapperRef = useRef();

  const showCountry = (item) => {
    setView({ list: false, item: true });
    setItem(item);
    wrapperRef.current.scrollIntoView();
  };

  // code...
  <div className="wrapper" ref={wrapperRef}>

相关问题