项目中用到了滚动导航，但是默认的滚动条太丑了，只好用js自己模拟了一个。凑合用可以，不算完美。希望以后有机会再来修饰一下。
先来看下最终效果：
最终效果
先看html结构:
<div id='root' class="root"> <ul class="list" id="list"> <li>全单1</li> <li>全部菜2单</li> <li>全部3单</li> <li>菜单4</li> <li>全菜单</li> <li>全部5菜单</li> <li>全6单</li> <li>全6部菜单</li> <li>全菜7单</li> <li>全8单</li> <li>全部5菜单</li> <li>全6单</li> <li>全6部菜单</li> <li>全菜7单</li> <li>全8单</li> <li>全9部菜单</li> <li>全10单</li> <li>全11部单</li> <li>菜2单</li> <li>全菜12单</li> <li>全32部菜单</li> </ul> </div>
说一下，末尾我给加了阴影的效果：
.root:before{
display: block;
content: '';
width: 20px;
height:100%;
background: rgba(111,111,111,0);
box-shadow: 2px 2px 32px 2px #999;
position: absolute;
right:-20px;
top:0;
}
其它的样式代码：
*{
margin: 0;
padding:0;
font-family: "Microsoft YaHei UI";
}
#root{
height:60px;
width: 800px;
white-space: nowrap;
overflow: hidden;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
position: relative;
border-bottom: 1px solid #eee;
padding-right: 20px;
background-color: #f5f5f5;
margin-left: 100px;
margin-top: 50px;
}
.root:before{
display: block;
content: '';
width: 20px;
height:100%;
background: rgba(111,111,111,0);
box-shadow: 2px 2px 32px 2px #999;
position: absolute;
right:-20px;
top:0;
}
.list{
position: absolute;
left:0;
top:0;
/*width: 100%;*/ /*不能为100%，不然宽度只有父容器的宽度，我掉进这个坑了。*/
transition: all 1s;
height:100%;
line-height: 2.5;
}
.on{
color:red;
font-weight: bold;
}
.off{
color: #000;
font-weight:normal;
}
.list li{
display: inline-block;
padding:10px 20px;
cursor: pointer;
}
下面是js的逻辑部分:
var box = document.getElementById('root'); //外面的容器。
var listBox = document.getElementById('list'); //ul列表。主要是移动它的left值
var list = document.getElementsByTagName('li');//所有列表元素
var width = box.clientWidth /2; //为了判断是左滑还是右滑
var totalWidth = 0;
for(let i=0;i<list.length;i++){
totalWidth = totalWidth + list[i].offsetWidth; //所有列表元素的总宽度
}
for(let i=0;i<list.length;i++){
var _offset = totalWidth - box.clientWidth; //右边的偏移量
list[i].addEventListener('click', function (e) {
for(let j=0;j<list.length;j++){
list[j].className = 'off'; //移除所有元素的样式
}
list[i].className = 'on'; //给点击的元素添加样式
var offset =totalWidth - (Math.abs(listBox.offsetLeft) + box.clientWidth) + 100; //右边的偏移量 = 所有元素宽度之和 - （ul容器的左偏移量 + 父容器的宽度）
if(e.pageX > width && offset > 0){ //点击右侧并且右侧的偏移量大于0，左滑。
listBox.style.left = (listBox.offsetLeft-200) + 'px';
}else if(e.pageX > width && offset > 200){ //临界位置，，右侧滚动到末尾
listBox.style.left = -_offset + 'px';
}
if(e.pageX < width && listBox.offsetLeft < -200) { //点击左侧并且左侧的偏移量小于0，左滑。
listBox.style.left = (listBox.offsetLeft + 200) + 'px';
}else if(e.pageX < width && listBox.offsetLeft < 0){ //临界位置，左侧滚到开始的位置
listBox.style.left = 0
}
});
}
点击如下所示：
还有些不完善的地方，求各位大神指正。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“js实现水平滚动菜单导航”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。