js實現水平滾動菜單導航

2019-11-19 16:01:47

字體：大中小

來源：轉載

供稿：網友

項目中用到了滾動導航，但是默認的滾動條太丑了，只好用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     }   }); }

點擊如下所示：