原生js实现导航栏拖拽滑动(适用于pc端和手机端)

本文链接：https://blog.youkuaiyun.com/weixin_48171107/article/details/121691519

先贴一张动图看看效果吧
在这里插入图片描述
下面把代码贴上注释都在代码边上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .navBar {
            border: 1px solid red;
            width: 1200px;
            margin-left: 25px;
            margin-top: 40px;
            margin-bottom: 40px;
            overflow-x: auto; 
            white-space: nowrap;
        }
        /* 去掉底部滚动条 */
        .navBar::-webkit-scrollbar {
            display: none;
        }

        li {
            display: inline-table;
            height: 50px;
            margin: 10px;
            border-radius: 10px;
            background: #EEEEEE;
            font-family: " PingFangSC-Regular";
            font-size: 30px;
            color: #333333;
            text-align: center;
            width: 300px;
        }
    </style>
</head>

<body>
    <ul class="navBar" id="nav">
        <li>拖动1</li>
        <li>拖动2</li>
        <li>拖动3</li>
        <li>拖动4</li>
        <li>拖动5</li>
        <li>拖动6</li>
        <li>拖动7</li>
        <li>拖动8</li>
        <li>拖动9</li>
        <li>拖动10</li>
    </ul>
</body>

</html>
<script>
    var flag; //鼠标按下
    var downX; //鼠标点击的x下标
    var scrollLeft; //当前元素滚动条的偏移量
    nav.addEventListener("mousedown", function (event) {
        flag = true;
        downX = event.clientX; //获取到点击的x下标
        scrollLeft = this.scrollLeft; //获取当前元素滚动条的偏移量
    });
    nav.addEventListener("mousemove", function (event) {
        if (flag) { //判断是否是鼠标按下滚动元素区域
            var moveX = event.clientX; //获取移动的x轴
            var scrollX = moveX - downX; //当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
            this.scrollLeft = scrollLeft - scrollX //鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
            console.log(scrollX)
        }
    });
    // 鼠标抬起停止拖动
    nav.addEventListener("mouseup", function () {
        flag = false;
    });
    // 鼠标离开元素停止拖动
    nav.addEventListener("mouseleave", function (event) {
        flag = false;
    });

</script>