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

最新推荐文章于 2024-08-17 19:33:31 发布

J_Emiya_Kiritsugu

最新推荐文章于 2024-08-17 19:33:31 发布

阅读量401

点赞数

分类专栏： react 文章标签： react.js

本文链接：https://blog.youkuaiyun.com/m0_52210232/article/details/131275871

版权

react 专栏收录该内容

1 篇文章

订阅专栏

该文章介绍了一种使用JavaScript实现PC端内容区域通过鼠标拖动来控制隐藏横向滚动条滚动的方法。通过监听鼠标事件，动态计算鼠标位置并更新元素的left值，从而实现平滑的滚动效果。核心代码涉及useStatehooks和DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

效果描述：

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

思路：

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

代码：

  //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>