原生撸移动端顶部滚动菜单栏，实现可滚动控制滚动边界动态样式

最新推荐文章于 2023-10-09 11:45:23 发布

六卿

最新推荐文章于 2023-10-09 11:45:23 发布

阅读量1.1k

点赞数 5

分类专栏： # js 文章标签： css3 html js

本文链接：https://blog.csdn.net/qq_43291759/article/details/121311214

版权

js 专栏收录该内容

97 篇文章 10 订阅

订阅专栏

原生撸移动端顶部滚动菜单栏

实现的效果为：
在这里插入图片描述

可以自由滚动，设置滚动的左边界和有边界

html和css为

<!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>头部移动菜单例子</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #tabsBox {
            position: relative;
            width: 100%;
            background-color: #fff;
            height: 60px;
            overflow-x: auto;
            overflow-y: hidden;
            border-bottom: 1px solid #8A39FF;
        }

        #tabsBox .tabsBoxChild {
            padding: 11px 15px;
            width: max-content;
            position: absolute;
            left: 0;
        }

        #tabsBox .tabsBoxChild>span {
            display: inline-block;
            line-height: 38px;
            padding: 0 20px;
        }

        /* 点击 激活的样式 */
        #tabsBox .tabsBoxChild>.active {
            color: #8A39FF;
        }

        /* 隐藏 滚动条 */
        /* webkit	 */
        #tabsBox .tabsBoxChild::-webkit-scrollbar {
            width: 0 !important
        }

        /* IE 10+ */
        #tabsBox .tabsBoxChild {
            -ms-overflow-style: none;
        }

        /* Firefox */
        #tabsBox .tabsBoxChild {
            overflow: -moz-scrollbars-none;
        }
    </style>
</head>

<body>
    <div id="tabsBox">
        <div class="tabsBoxChild">
            <span class="childSpan" ontouchstart="tab(0)">
                菜单1
            </span>
            <span class="childSpan" ontouchstart="tab(1)">
                菜单2
            </span>
            <span class="childSpan" ontouchstart="tab(2)">
                菜单3
            </span>
            <span class="childSpan" ontouchstart="tab(3)">
                菜单4
            </span>
            <span class="childSpan" ontouchstart="tab(4)">
                菜单5
            </span>
            <span class="childSpan" ontouchstart="tab(5)">
                菜单6
            </span>
            <span class="childSpan" ontouchstart="tab(6)">
                菜单7
            </span>
            <span class="childSpan" ontouchstart="tab(7)">
                菜单8
            </span>
            <span class="childSpan" ontouchstart="tab(8)">
                菜单1
            </span>
            <span class="childSpan" ontouchstart="tab(9)">
                菜单9
            </span>
            <span class="childSpan" ontouchstart="tab(10)">
                菜单10
            </span>
            <span class="childSpan" ontouchstart="tab(11)">
                菜单11
            </span>
            <span class="childSpan" ontouchstart="tab(12)">
                菜单12
            </span>

        </div>
    </div>
</body>

</html>

上面的css和html已经实现所有元素在一行显示的效果，但是不可以滚动，我们需要使用js来动态控制它的定位，来实现它的滚动效果。

点击事件更换高亮样式active

    <script>

        // 第一次点击的默认值
        let tabsBoxChildStartPageX = 0
        // move默认值
        let tabsBoxChildMovePageX = 0
        // start move的差值
        let tabsBoxChildPageX = 0
        // 获取滚动盒子
        let tabsBoxChild = document.getElementsByClassName('tabsBoxChild')[0]
        // 移动端点击事件
        tabsBoxChild.addEventListener('touchstart', function (e) {
            tabsBoxChildStartPageX = 0
            tabsBoxChildMovePageX = 0
            tabsBoxChildStartPageX = e.touches[0].pageX
        })
        // 移动端移动事件
        tabsBoxChild.addEventListener('touchmove', function (e) {
            tabsBoxChildMovePageX = e.touches[0].pageX
            tabsBoxChildPageX = tabsBoxChildStartPageX - tabsBoxChildMovePageX
            tabsBoxChildStartPageX = tabsBoxChildMovePageX
            let tabsBoxChildLeft = Number(tabsBoxChild.style.left.split('px')[0])
            // 左临界
            if (tabsBoxChildLeft > 0) {
                tabsBoxChild.style.left = '0px'
                return
            }
            // 右临界   
            // tabsBoxChild.offsetWidth当前盒子的宽度  
            // document.body.clientWidth 视图宽度
            if (tabsBoxChildLeft <
                -(tabsBoxChild.offsetWidth - document.body.clientWidth)) {
                tabsBoxChild.style.left = -(tabsBoxChild.offsetWidth - document.body.clientWidth) + 'px'
                return
            }
            tabsBoxChild.style.left = Number(tabsBoxChildLeft) + (-tabsBoxChildPageX) + 'px'
        })

        function tab(i = '0') {
            let tabsBoxChild = document.getElementsByClassName('tabsBoxChild')[0]
            for (let i = 0; i < tabsBoxChild.children.length; i++) {
                tabsBoxChild.children[Number(i)].classList.remove("active");
            }
            tabsBoxChild.children[Number(i)].classList.add("active");
        }
        tab()
    </script>