transform: translate3d(x,y,z) 代替 position: absolute定位实现虚拟滚动
image.png

  • 不能把 transform加到 height=40000的 div上面，会出现滚动条【无法滚动到低的Bug】

FixedSizeList

  1. import React, { useState, useEffect, useRef } from 'react';
  2. import PropTypes from 'prop-types';
  3. import classNames from 'classnames';
  5. FixedSizeList.propTypes = {
  6.   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  7.   height: PropTypes.number,
  8.   itemSize: PropTypes.number,
  9.   itemCount: PropTypes.number,
  10.   className: PropTypes.string,
  11. };
  13. function FixedSizeList(props) {
  14.   const { width, height, itemSize, itemCount, className, children } = props;
  15.   const rootRef = useRef(null);
  16.   const [scrollTop, setScrollTop] = useState(0);
  17.   // 要显示的元素起始和结束索引
  18.   const [startIndex, setStartIndex] = useState(0);
  20.   const CHILDREN = [];
  21.   // 可视区显示多少个
  22.   const pageSize = Math.ceil(height / itemSize);
  23.   const endIndex = startIndex + pageSize;
  25.   useEffect(init, []);
  27.   function init() {
  28.     const el = rootRef.current;
  29.     el.addEventListener('scroll', onScroll);
  30.     return () => {
  31.       el.removeEventListener('scroll', onScroll);
  32.     };
  33.   }
  35.   // 滚动时，重新计算开始的索引
  36.   function onScroll(e) {
  37.     let { scrollTop } = e.target;
  38.     const _endIndex = itemCount - endIndex;
  39.     // 起始值要向下取整
  40.     let index = Math.floor(scrollTop / itemSize);
  42.     if (index >= _endIndex) index = _endIndex;
  43.     setStartIndex(index);
  44.     setScrollTop(scrollTop);
  45.     console.log('e', scrollTop, scrollTop % itemSize, index);
  46.   }
  48.   const style = { width: '100%', height: itemSize };
  49.   for (let i = startIndex; i < endIndex; i++) {
  50.     CHILDREN.push(children({ index: i, style }));
  51.   }
  53.   const rootClass = classNames({[classNames]: Boolean(className)});
  54.   const rootStyle = { width, height, position: 'relative', overflow: 'auto' };
  55.   // 核心style，设置滚动时的高度
  56.   const transformStyle = {
  57.     transform: `translate3d(0, ${scrollTop}px, 0)`,
  58.     transition: 'transform 60ms linear',
  59.     willChange: 'transform',
  60.   };
  62.   return (
  63.     <div
  64.       style={rootStyle}
  65.       ref={rootRef}
  66.       className={rootClass}
  67.     >
  68.       <div style={{ height: itemSize * itemCount }}>
  69.         <div style={transformStyle}>
  70.           {CHILDREN}
  71.         </div>
  72.       </div>
  73.     </div>
  74.   );
  75. }
  76. export default FixedSizeList

index.less

  1. :global {
  2.   .odd {
  3.     background-color: rgba(156, 179, 197, 0.26);
  4.   }
  6.   .scrollbar{
  7.     &::-webkit-scrollbar{
  8.       width:8px;
  9.     }
  10.     &::-webkit-scrollbar-track{
  11.       background-color: #fafafa;
  12.       border-radius: 4px;
  13.     }
  14.     // 滚动部分的样式
  15.     &::-webkit-scrollbar-thumb{
  16.       background-color: rgba(0, 0, 0, 0.45);
  17.       border-radius: 8px;
  18.       transition: background-color 300ms linear;
  19.       &:hover {
  20.         background-color: rgba(0, 0, 0, 0.65)
  21.       }
  22.     }
  23.     // 2个滚动条对齐的样式
  24.     &::-webkit-scrollbar-corner{
  25.       background-color: rgba(187,187,187, 1);
  26.     }
  27.   }
  28. }