水平滚动导航菜单

水平滚动菜单导航

项目中用到了滚动导航，但是默认的滚动条太丑了，只好用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          }     });  }

点击如下所示：

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