前端：横向滚动条，拖动进行左右滚动（含隐藏滚动条）

最新推荐文章于 2024-07-09 11:43:29 发布

25号底片~

最新推荐文章于 2024-07-09 11:43:29 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_46001736/article/details/132556591

版权

前端专栏收录该内容

33 篇文章 1 订阅

订阅专栏

效果

image preview

代码

<!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>横向滚动条，选择隐藏滚动条</title>
        <style>
        ul {
            list-style-type: none;
            display: flex;
            border: 1px solid red;
            width: 200px;
            padding: 0px;
            margin: 5%;
            user-select: none;
            overflow-x: auto; /* 添加横向滚动 */
            white-space: nowrap; /* 防止标签换行 */
            /* 禁止文字复制 */
        }
        /* 隐藏Webkit浏览器的滚动条 */
        /* ul::-webkit-scrollbar {
            display: none; 
        } */
        li {

            border: 1px solid black;
            padding: 10px;
            margin: 10px;
        }
    </style>
    </head>

    <body>
        <ul id="tabsContainer">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <script>
        var tabsContainer = document.getElementById('tabsContainer');
        var isMouseDown = false;
        var startX = 0;
        var scrollLeft = 0;

        tabsContainer.addEventListener('mousedown', function (e) {
            isMouseDown = true;
            startX = e.pageX - tabsContainer.offsetLeft;
            scrollLeft = tabsContainer.scrollLeft;
        });

        tabsContainer.addEventListener('mouseleave', function () {
            isMouseDown = false;
        });

        tabsContainer.addEventListener('mouseup', function () {
            isMouseDown = false;
        });

        tabsContainer.addEventListener('mousemove', function (e) {
            if (!isMouseDown) return;
            e.preventDefault();
            var x = e.pageX - tabsContainer.offsetLeft;
            var walk = (x - startX) * 1; // 调整滚动速度
            tabsContainer.scrollLeft = scrollLeft - walk;
        });
    </script>
    </body>

</html>