项目中用到了滚动导航，但是默认的滚动条太丑了，只好用js自己模拟了一个。凑合用可以，不算完美。希望以后有机会再来修饰一下。
先来看下最终效果：
最终效果
先看html结构:
说一下，末尾我给加了阴影的效果：
其它的样式代码：
下面是js的逻辑部分:
<div class="jb51code">
<pre class="brush: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 && list<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.offsetLeft < 0){ //临界位置，左侧滚到开始的位置
list<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.style.left = 0
}});
}
点击如下所示：
@H_404_74@
还有些不完善的地方，求各位大神指正。
原文链接：https://www.f2er.com/js/37696.html