【React】pc端实现无滚动条 鼠标样式滑动，

可以先阅读如下文章，在读此文：

js 实现pc端鼠标拖动触发横向滚动条的滚动（隐藏的滚动条）_js横向滚动条_草字的博客-CSDN博客

效果描述：

一定区域，可用鼠标进行滑动实现滑动展示内容

思路：

        鼠标滑动后检测鼠标位置，再改变对应标签离左侧的距离

代码：

  //4张卡片滑动需要的参数
  const [downX, setDownX] = useState(0);
  const [moveX, setMoveX] = useState(0);
  const [scrollX, setScrollX] = useState(0);
  const drawRef = useRef(null);
  const [scrollFlag, setScrollFlag] = useState(true);
  const [scrollPosition, setScrollPosition] = useState(0);

  const getMouseStart = (e) => {
    setScrollFlag(true)
    setDownX(e.clientX)
    setScrollPosition(drawRef.current.scrollLeft)
  };

  const getMouseMove = (e) => {
    if (scrollFlag) {
      const container = drawRef.current;
      setMoveX(e.clientX);
      setScrollX(moveX - downX);
      if (scrollX < 0 && scrollPosition > 0) {
        console.log('scX ', scrollX)
        container.scrollLeft = scrollPosition - scrollX;
        setScrollPosition(scrollPosition - scrollX);
      } else {
        container.scrollLeft = scrollPosition - scrollX;
        setScrollPosition(scrollPosition - scrollX);
      }
    }
  };

{/*以下是渲染部分的内容*/}
<div className='scroll-container no_copy' ref={drawRef} onMouseDown={getMouseStart} onMouseMove={getMouseMove} onMouseUp={getMouseUp}>
{/* 滑动的具体内
样式属性:
 .outer-container {
  overflow-x: scroll !important;
  // border: 5px solid purple;
  // flex-shrink: 0;
  // width: 950px;
  position: relative;
}
.scroll-item {
  flex-shrink: 0;
  display: inline-flex;
}

 */}
<div className='scroll-item'  >
</div>
</div>