鼠标拖动元素实现移动滚动条+实战

    
        
        
        
        
        
    
 
    
        

            
1
            
2
            
3
            
4
            
5
            
6
        
        
    
 

/* 隐藏Webkit浏览器的滚动条 */
ul::-webkit-scrollbar {
        display: none; 
} 

以上转载前端：横向滚动条，拖动进行左右滚动（含隐藏滚动条）_前端横向滚动-CSDN博客

实战运用导航菜单：

        

            {labelList &&
              labelList.map(v => (
                 {
                    handleTagClick(v.id);
                  }}
                >

const [isMouseDown, setIsMouseDown] = useState(false);
  const [startX, setStartX] = useState(0);
  const [scrollLeft, setScrollLeft] = useState(0);

  const handleMouseDown = (e) => {
    setIsMouseDown(true);
    setStartX(e.pageX - e.currentTarget.offsetLeft);
    setScrollLeft(e.currentTarget.scrollLeft);
  };

  const handleMouseLeave = () => {
    setIsMouseDown(false);
  };

  const handleMouseUp = () => {
    setIsMouseDown(false);
  };

  const handleMouseMove = (e) => {
    if (!isMouseDown) return;
    e.preventDefault();
    const x = e.pageX - e.currentTarget.offsetLeft;
    const walk = (x - startX) * 1; // 调整滚动速度
    e.currentTarget.scrollLeft = scrollLeft - walk;
  };

Video_20231220103011