react.js - 实现虚拟列表过程中出现滚动条抖动问题该怎么解决？

Question

学习实现虚拟列表的过程中，让类名为holder的元素不占据高度的情况下，发现页面在往下滚动的过程中出现滚动条抖动的问题，并且是反复抽搐，为什么会出现这样的情况

export default function VirtualList() {  const [position, setPosition] = useState({ start: 0, end: 0 });  const [data, setData] = useState([]);  const listBoxRef = useRef();  const contentRef = useRef();  const scrollInfo = useRef({    itemHeight: 60,    bufferCount: 8,    renderCount: 0  });  useEffect(() => {    const { itemHeight, bufferCount } = scrollInfo.current;    const { height } = listBoxRef.current.getBoundingClientRect();    const renderCount = Math.ceil(height / itemHeight) + bufferCount;    const dataList = new Array(10000).fill(0).map((_, index) => index + 1);    scrollInfo.current = { ...scrollInfo.current, renderCount };    setData(dataList);    setPosition({ start: 0, end: renderCount });  }, []);  const handleScroll = () => {    const { itemHeight, renderCount } = scrollInfo.current;    const scrollTop = listBoxRef.current.scrollTop;    console.log('scrollTop', scrollTop);    const start = Math.floor(scrollTop / itemHeight);    const end = start + renderCount;    // contentRef.current.style.transform = `translate3d(0, ${scrollTop}px, 0)`;    if (start !== position.start || end !== position.end) {      setPosition({ start, end });    }  };  console.log(position);  const { itemHeight } = scrollInfo.current;  return (    <div className="list-box" ref={listBoxRef} onScroll={handleScroll}>      <div        className="holder"        style={{ height: `${itemHeight * data.length}px` }}      ></div>      <div className="content-area" ref={contentRef}>        {data.slice(position.start, position.end).map((item) => (          <div key={item} className="item">            {item}          </div>        ))}      </div>    </div>  );}

.item {  list-style: none;  background-color: #fc4838;  padding: 10px 20px;  color: #fff;  height: 50px;  line-height: 50px;  box-sizing: border-box;  margin-bottom: 10px;  margin-left: 24px;  margin-right: 24px;  font-weight: bold;  border-radius: 10px;}.list-box {  position: fixed;  left: 0;  right: 0;  top: 20px;  bottom: 0;  overflow: scroll;}.holder {  position: absolute;  top: 0;  left: 0;  right: 0;}

Answer 1

浏览器滚动锚点导致，要么你每次滚动后重设scrollTop，要么css取消滚动锚点：overflow-anchor: none