reactjs - 反応ウィンドウの仮想化された行の垂直スクロール バー

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;
  }