Ionic React - Custom hook to customize the scrollbar

ionic-react-custom-hook-to-customize-the-scrollbar.md

How to use

import useCustomIonContentScroll from './useCustomIonContentScroll';

const YourIonPage: React.FC = () => {
    const customIonContentScrollRef = useCustomIonContentScroll();

    return (
      <IonPage className="play-game-page">
        ...
        <IonContent ref={customIonContentScrollRef}>
        ...
        </IonContent>
      </IonPage>
    );
}
export const YourIonPage;

Example

example.mov

useCustomIonContentScroll.ts

import { useEffect, useRef } from 'react';

const useCustomIonContentScroll = () => {

  const ref = useRef(null);

  const styleScrollbars = (elmt: any) => {
    const stylesheet = `
        ::-webkit-scrollbar {
          width: 10px;
        }
        ::-webkit-scrollbar-track {
          padding: 2px 0;
          border-radius: 15px;
        }
        ::-webkit-scrollbar-thumb {
          border-radius: 10px;
          box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
          background: var(--ion-color-tertiary);
        }
        ::-webkit-scrollbar-thumb:hover {
          // Your customization
        }
      `;

    const styleElmt = elmt.shadowRoot.querySelector('style');

    if (styleElmt) {
      styleElmt.append(stylesheet);
    } else {
      const barStyle = document.createElement('style');
      barStyle.append(stylesheet);
      elmt.shadowRoot.appendChild(barStyle);
    }
  };

  useEffect(() => {
    styleScrollbars(ref.current);
  }, [ref]);

  return ref;
};

export default useCustomIonContentScroll;