导航条滚动（上下翻页，滑动翻页）

最新推荐文章于 2024-06-28 17:11:23 发布

晚时之秋

最新推荐文章于 2024-06-28 17:11:23 发布

阅读量657

点赞数 10

CC 4.0 BY-SA版权

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_66557048/article/details/135531747

本文介绍了如何使用HTML、CSS和JavaScript创建一个带有导航箭头的可滚动列表，滚动时控制导航图标显示和隐藏，以提供无缝的用户体验。

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

视频效果

导航滚动条

html代码如下：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <style>
        body {
            background-color: #f1f1f1;
            margin: 0;
            padding: 0;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        #listDiv {
            width: 100%;
            overflow-x: scroll;
            background-color: #ffffff;
        }

        #listDiv ul {
            display: flex;
            white-space: nowrap;
            padding-left: 20px;
        }

        #listDiv ul li {
            padding: 5px 15px 5px 15px;
            background-color: #ededed;
            margin-right: 10px;
            display: flex;
            justify-content: center;
            border-radius: 25px;
        }

        .prev,
        .next {
            position: fixed;
            top: 20px;
        }

        .prev {
            left: 0px;
            display: none;
        }

        .next {
            right: 0px;
        }
    </style>
</head>

<body>
    <svg t="1698737430930" class="prev" class="icon" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="9839" width="26" height="26">
        <path
            d="M378.630968 512.004093 705.390034 177.12714c11.038404-11.33107 11.038404-29.692253 0-41.021276-11.07729-11.32186-28.988218-11.32186-40.027645 0L318.636572 491.503177c-11.07729 11.32186-11.07729 29.68202 0 41.002856L665.362388 887.895159c11.039427 11.320836 28.950356 11.320836 40.027645 0 11.038404-11.320836 11.038404-29.68202 0-41.013089L378.630968 512.004093z"
            fill="#8a8a8a" p-id="9840"></path>
    </svg>
    <svg t="1698728822266" class="next" class="icon" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="2867" width="26" height="26">
        <path
            d="M711.6 488.624L355.2 152.976a29.36 29.36 0 0 0-42.352 0 31.408 31.408 0 0 0 0 43.552L647.76 512 312.848 827.36a31.408 31.408 0 0 0 0 43.552 29.36 29.36 0 0 0 42.352 0l356.4-335.648a36.32 36.32 0 0 0 0-46.64z"
            fill="#8a8a8a" p-id="2868" data-spm-anchor-id="a313x.search_index.0.i2.41143a816djp7O" class="selected">
        </path>
    </svg>
    <div id="listDiv">
        <ul id="list">
            <li class="item">李白</li>
            <li class="item">杜甫</li>
            <li class="item">杜牧</li>
            <li class="item">王安石</li>
            <li class="item">无承诺</li>
            <li class="item">曹雪芹</li>
        </ul>
    </div>
</body>
<script>
    $(document).ready(function () {
        var container = $("#listDiv");
        var leftIcon = document.querySelector('#listDiv');
        var totalWidth = $("#list").outerWidth(true);
        var prevIcon = document.getElementsByClassName("prev")[0];
        var nextIcon = document.getElementsByClassName("next")[0];
        $(".prev").click(function () {
            container.animate({ scrollLeft: "-=" + totalWidth }, "slow");
        });
        $(".next").click(function () {
            container.animate({ scrollLeft: "+=" + totalWidth }, "slow");
        });
        $("#listDiv").scroll(function () {
            let left = Math.trunc(leftIcon.scrollLeft);
            if (left == 0) {
                prevIcon.style.display = 'none';
            }
            if (left > 0) {
                prevIcon.style.display = 'block';
            }
            if (left < leftIcon.scrollWidth - totalWidth) {
                nextIcon.style.display = 'block';
            }
            if (left == leftIcon.scrollWidth - totalWidth) {
                nextIcon.style.display = 'none';
            }
        });
    })
</script>

</html>