reactjs - react-window 虚拟化行的垂直滚动条

Question

我正在使用 FixedSizeList 来渲染非常大的数据，这要归功于 react-window 一切都是一个平滑的过程，输出更平滑。

几天来，我正在尝试使用 react-custom-scrollbars 添加一个垂直滚动条，我可以轻松地集成它并使其可用。但是我花了几天时间终于来到这里的问题是将垂直滚动条放在浏览器页面的末尾，就像一个粘性元素，这样用户就不需要水平滚动直到结束列表，然后垂直滚动。

我已将自定义滚动条放置在屏幕的右端。但是水平滚动也会滚动垂直滚动条。

代码显示了我打算做什么：

import React, { useCallback } from 'react';
import { FixedSizeList as VirtualizedList } from 'react-window';
import { Scrollbars } from 'react-custom-scrollbars';

import ListViewRow from './ListViewRow';

const boxShadowSize = 4;

const CustomScrollbars = ({ onScroll, forwardedRef, style, children }) => {
  const refSetter = useCallback((scrollbarsRef) => {
    if (scrollbarsRef) {
      forwardedRef(scrollbarsRef.view);
    } else {
      forwardedRef(null);
    }
  }, []);

  return (
    <Scrollbars
      ref={refSetter}
      style={{ ...style, overflow: 'hidden' }}
      onScroll={onScroll}
      renderTrackVertical={props => <div {...props} className="track-vertical" />}
      renderTrackHorizontal={props => <div {...props} className="track-horizontal" style={{ display: 'none' }} />}
      renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" style={{ display: 'none' }} />}
    >
      {children}
    </Scrollbars>
  );
};

const CustomScrollbarsVirtualList = React.forwardRef((props, ref) => (
  <CustomScrollbars {...props} forwardedRef={ref} />
));

const VirtualizedRow = ({
  index,
  style,
  data: {
    RowComponent,
    rows,
    rowHeight
  }
}) => (
  <RowComponent
    // Adding a margin-top to the first row to prevent the box-shadow from being hidden by the overflow:hidden
    style={index === 0 ? { ...style, marginTop: boxShadowSize, height: rowHeight - boxShadowSize } : style}
    key={rows[index].id}
    row={rows[index]}
    index={index}
  />
);

const VirtualizedRows = ({ listHeight, rowHeight, overscanCount, ...rest }) => {
  const rowProps = { ...rest, rowHeight, ListViewRow };

  return (
    <VirtualizedList
      height={listHeight}
      itemCount={rest.rows.length}
      itemSize={rowHeight}
      itemData={rowProps}
      overscanCount={overscanCount}
      outerElementType={CustomScrollbarsVirtualList}
    >
      {VirtualizedRow}
    </VirtualizedList>
  );
};

export default VirtualizedRows;

相关CSS：

  .track-vertical {
    background-color: $white;
    position: absolute;
    width: 14px !important;
    left: calc(100vw - 14px);
    bottom: 1px;
    top: 1px;
  }