项目中用到了滚动导航，但是默认的滚动条太丑了，只好用射流研究…自己模拟了一个。凑合用可以，不算完美。希望以后有机会再来修饰一下。

先来看下最终效果：

最终效果

先看超文本标记语言结构：

div id=' root ' class=' root ' ul class=' list ' id=' list ' Li全单1/李莉全部菜2单/li li全部3单/li li菜单4/李莉全菜单/li li全部5菜单/li li全6单/li li全6部菜单/li li全菜七单/li li全8单/li li全部5菜单/li li全6单/li li全6部菜单/li li全菜七单/li li全8单/li li全9部菜单/li li全10单/li li全11部单/li li菜2单/li li全菜12单/li li全32部菜单/Li/ul/分区说一下，末尾我给加了阴影的效果：root:before { display: block块块；内容： " "；宽度： 20px高度：100%;背景： rgba(111，111，111，0)；盒影： 2px 2px 32px 2px # 999绝对位置：右侧：-20px；top:0}其它的样式代码：

* { margin : 0；划水：0;字体系列： '微软雅黑用户界面'；} # root { height:60px宽度： 800像素；空白： nowrap飞越：隐藏；-WebKit-溢出-滚动3360触摸；空白： nowrap相对位置：边框-底部： 1px实心# eee填充-右侧： 20px背景-color : # F5 F5；左边距： 100像素；边距-top : 50px；} .root :在{显示：块之前；内容： " "；宽度： 20px高度：100%;背景： rgba(111，111，111，0)；盒影： 2px 2px 32px 2px # 999绝对位置：右：-20px；top:0}。列表{位置：绝对值；left :0 to :0/*宽度： 100%;*//*不能为100%,不然宽度只有父容器的宽度，我掉进这个坑了*/transit :全1;高度：100%;线高： 2.5;} .在{ color:redfont-weight:粗体；} .关闭{ color: # 000字体粗细：正常；} .列表Li {显示：内嵌块；padd :10 px 20 pxcursor :指针；}下面是射流研究…的逻辑部分：

var box=文档。getelementbyid(' root ')；//外面的容器var listBox=文档。getelementbyid(' list ')；//ul列表。主要是移动它的左边的值var列表=文档。getelementsbytagname(' Li ')；//所有列表元素var width=box。客户端宽度/2；//为了判断是左滑还是右滑var总宽度=0；用于(设I=0；ilist . lengthi){ total width=total width list[I].offset with//所有列表元素的总宽度}对于(让I=0；ilist.lengthI){ var _ offset=总宽度-box。客户端宽度；//右边的偏移量清单[i].添加事件侦听器(“单击”)，函数(e) {对于(让j=0；jlist.lengthj ){ list[j].关闭/移除所有元素的样式}列表[i].类名=' on//给点击的元素添加样式var offset=总宽度-(数学。ABS(列表框。offsetleft)框。客户端宽度)100；//右边的偏移量=所有元素宽度之和- (ul容器的左偏移量父容器的宽度)if(e.pageX宽度偏移0){ //点击右侧并且右侧的偏移量大于0,左滑列表框。风格。左=(列表框。offset left-200)“px”；}else if(e.pageX宽度偏移200){ //临界位置，右侧滚动到末尾列表框。风格。left=-_ offset ' px '；} if(e.pageX宽度listBox.offsetLeft -200) { //点击左侧并且左侧的偏移量小于0,左滑列表框。风格。左=(列表框。offset left 200)“px”；} else if(例如pagex width listbox。offsetleft 0){//临界位置，左侧滚到开始的位置列表框。风格。left=0 } })；}点击如下所示：

还有些不完善的地方，求各位大神指正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。