Vertical Scroll Bar for react-window virtualized row

Question

I am using FixedSizeList for rendering very large data, thanks to react-window that everything has been a smooth process with smoother output.

For a couple of days, I am trying to add a vertical scroll bar using react-custom-scrollbars, and I could easily integrate it and make it usable. BUT the issue for which I have spent a couple of days and finally I am here is putting the Vertical Scrollbar at the end of the browser page, like a sticky element, so that the user doesn't need to scroll horizontally till the end of the list and then scroll vertically.

I have positioned the custom scrollbar to the right end of my screen. But horizontal scrolling also scrolls the vertical scrollbar.

The code shows what I intended to do:

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;

related CSS:

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