pc端原生JS实现鼠标点击屏幕左右滑动

最新推荐文章于 2024-04-26 16:47:03 发布

m0_52611940

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量410

点赞数

文章标签： javascript 计算机外设开发语言

本文链接：https://blog.csdn.net/m0_52611940/article/details/131052156

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .navBar {
            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;
            line-height: 50px;
            padding-left: 35px;
            padding-right: 35px;
            margin-right: 12.5px;
            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>
    <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) { // 判断是否是鼠标按下滚动元素区域
                // 获取移动的x轴
                var moveX = event.clientX; 
                // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
                var scrollX = moveX - downX; 
                // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
                this.scrollLeft = scrollLeft - scrollX;
                console.log(scrollX)
            }
        });
        // 鼠标抬起停止拖动
        nav.addEventListener("mouseup", function () {
            flag = false;
        });
        // 鼠标离开元素停止拖动
        nav.addEventListener("mouseleave", function (event) {
            flag = false;
        });
    
    </script>
    
</body>

</html>