Creating Custom Scrollbars with React

.custom-scrollbars__content {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.custom-scrollbars__content::-webkit-scrollbar {
  display: none;
}

<div className="custom-scrollbars__container">
  <div className="custom-scrollbars__content">
    {children}
  </div>
  <div className="custom-scrollbars__scrollbar">
    <button className="custom-scrollbars__button">⇑</button>
    <div className="custom-scrollbars__track-and-thumb">
      <div className="custom-scrollbars__track"></div>
      <div className="custom-scrollbars__thumb"></div>
    </div>
    <button className="custom-scrollbars__button">⇓</button>
  </div>
</div>

.custom-scrollbars__track-and-thumb {
  display: block;
  height: 100%;  /* must have some height */
  position: relative;
  width: 16px; /* must have some width */
}

/* The track is meant to fill the space it's given, so top and bottom are set to 0. */
.custom-scrollbars__track {
  bottom: 0;
  cursor: pointer;
  position: absolute;
  top: 0;
  width: 16px; /* must have some width */
}

/* No top or bottom set for the thumb. That will be controlled by JavaScript. */
.custom-scrollbars__thumb {
  position: absolute;
  width: 16px; /* must have some width */
}

import React, { useState, useEffect, useRef } from 'react';

const Scrollbar = ({
  children,
  className,
  ...props
}: React.ComponentPropsWithoutRef<'div'>) => {
  const contentRef = useRef<HTMLDivElement>(null);
  const scrollTrackRef = useRef<HTMLDivElement>(null);
  const scrollThumbRef = useRef<HTMLDivElement>(null);
  const observer = useRef<ResizeObserver | null>(null);
  const [thumbHeight, setThumbHeight] = useState(20);

  function handleResize(ref: HTMLDivElement, trackSize: number) {
    const { clientHeight, scrollHeight } = ref;
    setThumbHeight(Math.max((clientHeight / scrollHeight) * trackSize, 20));
  }

  // If the content and the scrollbar track exist, use a ResizeObserver to adjust height of thumb and listen for scroll event to move the thumb
  useEffect(() => {
    if (contentRef.current && scrollTrackRef.current) {
      const ref = contentRef.current;
      const {clientHeight: trackSize} = scrollTrackRef.current;
      observer.current = new ResizeObserver(() => {
        handleResize(ref, trackSize);
      });
      observer.current.observe(ref);
      return () => {
        observer.current?.unobserve(ref);
      };
    }
  }, []);

  return (
    <div className="custom-scrollbars__container">
      <div className="custom-scrollbars__content" ref={contentRef} {...props}>
        {children}
      </div>
      <div className="custom-scrollbars__scrollbar">
        <button className="custom-scrollbars__button">⇑</button>
        <div className="custom-scrollbars__track-and-thumb">
          <div className="custom-scrollbars__track"></div>
          <div
            className="custom-scrollbars__thumb"
            ref={scrollThumbRef}
            style={{
              height: `${thumbHeight}px`,
            }}
          ></div>
        </div>
        <button className="custom-scrollbars__button">⇓</button>
      </div>
    </div>
  );
};

export default Scrollbar;

- import React, { useState, useEffect, useRef } from 'react';
+ import React, { useState, useEffect, useRef, useCallback } from 'react';

const handleThumbPosition = useCallback(() => {
  if (
    !contentRef.current ||
    !scrollTrackRef.current ||
    !scrollThumbRef.current
  ) {
    return;
  }
  const { scrollTop: contentTop, scrollHeight: contentHeight } =
    contentRef.current;
  const { clientHeight: trackHeight } = scrollTrackRef.current;
  let newTop = (+contentTop / +contentHeight) * trackHeight;
  newTop = Math.min(newTop, trackHeight - thumbHeight);
  const thumb = scrollThumbRef.current;
  thumb.style.top = `${newTop}px`;
}, []);

useEffect(() => {
  if (contentRef.current && scrollTrackRef.current) {
    const ref = contentRef.current;
    const {clientHeight: trackSize} = scrollTrackRef.current;
    observer.current = new ResizeObserver(() => {
      handleResize(ref, trackSize);
    });
    observer.current.observe(ref);
+   ref.addEventListener('scroll', handleThumbPosition);
    return () => {
      observer.current.unobserve(ref);
+     ref.removeEventListener('scroll', handleThumbPosition);
    };
  }
}, []);

function handleScrollButton(direction: 'up' | 'down') {
  const { current } = contentRef;
  if (current) {
    const scrollAmount = direction === 'down' ? 200 : -200;
    current.scrollBy({ top: scrollAmount, behavior: 'smooth' });
  }
}

<button
  className="custom-scrollbars__button"
+ onClick={() => handleScrollButton('up')}
>
  ⇑
</button>

...

<button
  className="custom-scrollbars__button"
+ onClick={() => handleScrollButton('down')}
>
  ⇓
</button>

const handleTrackClick = useCallback(
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    const { current: trackCurrent } = scrollTrackRef;
    const { current: contentCurrent } = contentRef;
    if (trackCurrent && contentCurrent) {
      // First, figure out where we clicked
      const { clientY } = e;
      // Next, figure out the distance between the top of the track and the top of the viewport
      const target = e.target as HTMLDivElement;
      const rect = target.getBoundingClientRect();
      const trackTop = rect.top;
      // We want the middle of the thumb to jump to where we clicked, so we subtract half the thumb's height to offset the position
      const thumbOffset = -(thumbHeight / 2);
      // Find the ratio of the new position to the total content length using the thumb and track values...
      const clickRatio =
        (clientY - trackTop + thumbOffset) / trackCurrent.clientHeight;
      // ...so that you can compute where the content should scroll to.
      const scrollAmount = Math.floor(
        clickRatio * contentCurrent.scrollHeight
      );
      // And finally, scroll to the new position!
      contentCurrent.scrollTo({
        top: scrollAmount,
        behavior: 'smooth',
      });
    }
  },
  [thumbHeight]
);

<div
  className="custom-scrollbars__track"
  ref={scrollTrackRef}
+ onClick={handleTrackClick}
></div>

  const contentRef = useRef<HTMLDivElement>(null);
  const scrollTrackRef = useRef<HTMLDivElement>(null);
  const scrollThumbRef = useRef<HTMLDivElement>(null);
  const observer = useRef<ResizeObserver | null>(null);
  const [thumbHeight, setThumbHeight] = useState(20);
+ const [scrollStartPosition, setScrollStartPosition] = useState<number | null>(
    null
  );
+ const [initialScrollTop, setInitialScrollTop] = useState<number>(0);
+ const [isDragging, setIsDragging] = useState(false);

const handleThumbMousedown = useCallback((e) => {
  e.preventDefault();
  e.stopPropagation();
  setScrollStartPosition(e.clientY);
  if (contentRef.current) setInitialScrollTop(contentRef.current.scrollTop);
  setIsDragging(true);
}, []);

const handleThumbMouseup = useCallback(
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (isDragging) {
      setIsDragging(false);
    }
  },
  [isDragging]
);

const handleThumbMousemove = useCallback(
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (isDragging) {
      const {
        scrollHeight: contentScrollHeight,
        offsetHeight: contentOffsetHeight,
      } = contentRef.current;

      // Subtract the current mouse y position from where you started to get the pixel difference in mouse position. Multiply by ratio of visible content height to thumb height to scale up the difference for content scrolling.
      const deltaY =
        (e.clientY - scrollStartPosition) *
        (contentOffsetHeight / thumbHeight);
      const newScrollTop = Math.min(
        initialScrollTop + deltaY,
        contentScrollHeight - contentOffsetHeight
      );

      contentRef.current.scrollTop = newScrollTop;
    }
  },
  [isDragging, scrollStartPosition, thumbHeight]
);

// Listen for mouse events to handle scrolling by dragging the thumb
useEffect(() => {
  document.addEventListener('mousemove', handleThumbMousemove);
  document.addEventListener('mouseup', handleThumbMouseup);
  document.addEventListener('mouseleave', handleThumbMouseup);
  return () => {
    document.removeEventListener('mousemove', handleThumbMousemove);
    document.removeEventListener('mouseup', handleThumbMouseup);
    document.removeEventListener('mouseleave', handleThumbMouseup);
  };
}, [handleThumbMousemove, handleThumbMouseup]);

<div className="custom-scrollbars__track-and-thumb">
  <div
    className="custom-scrollbars__track"
    ref={scrollTrackRef}
    onClick={handleTrackClick}
+   style={{ cursor: isDragging ? 'grabbing' : 'pointer' }}
  ></div>
  <div
    className="custom-scrollbars__thumb"
    ref={scrollThumbRef}
+   onMouseDown={handleThumbMousedown}
    style={{
      height: `${thumbHeight}px`,
+     cursor: isDragging ? 'grabbing' : 'grab',
    }}
  ></div>
</div>