原生撸移动端顶部滚动菜单栏
实现的效果为：
可以自由滚动，设置滚动的左边界和有边界
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>
点击的时候触发tab函数，将所有子元素遍历一遍去掉active类名，将当前点击的元素加上active类名。
