模拟mac滚动效果，鼠标滚动时自动展示滚动条

利用React封装自定义hook，模拟mac滚动效果，鼠标滚动时自动展示滚动条，滚动后自动取消滚动条显示；

import { useEffect } from 'react';
export function useToggleScroll(dom: HTMLElement | null) {
  function initStyle() {
    if (!document.querySelector('#toggle-scroll')) {
      const style = document.createElement('style');
      style.type = 'text/css';
      style.id = 'toggle-scroll';
      style.innerHTML = `
            .toggle-scroll-hidden::-webkit-scrollbar-thumb,
            .toggle-scroll-hidden::-webkit-scrollbar-track {
              visibility: hidden;
            }
            .toggle-scroll-visible::-webkit-scrollbar-thumb,
            .toggle-scroll-visible::-webkit-scrollbar-track {
              visibility: visible;
            }`;
      document.head.appendChild(style);
    }
  }
  useEffect(() => {
    initStyle();
    let timer: NodeJS.Timer;
    const className = ' toggle-scroll-visible';
    function handleScroll(e: any) {
      timer && clearTimeout(timer);
      if (!e.target.className.includes(className)) {
        e.target.className += className;
      }
      timer = setTimeout(() => {
        e.target.className = e.target.className.replace(className, '');
      }, 800);
    }
    if (dom) {
      dom.className += ' toggle-scroll-hidden';
      dom.addEventListener('scroll', handleScroll);
    }
    return () => {
      dom && dom.removeEventListener('scroll', handleScroll);
    };
  }, [dom]);
}