例:
页面有用第三方插件build.js,点击下载
<script src="jquery-1.11.0.min.js"></script>
<script src="build.js"></script>
<div class="systemSelect" style="margin-top:100px;margin-left:100px;">
<div class="scrollNavBox">
<div class="scrollUnitNav" id="scrollUnitNav">
<ul id="navbar_box">
<li id="ecaa6f23_49ce_4103_873d_8911c43f3c24" class="navbar_item navbar_item_enable li_element">
<a>总部(中国)</a>
</li>
<li id="66efb6c1_6c6f_43e8_b296_3837f12111e9" class="navbar_item navbar_item_enable li_element">
<a>山东省</a>
</li>
<li id="5c874cf0_346a_4ca0_a255_35e6eb3c739a" class="navbar_item navbar_item_enable li_element">
<a>德州市</a>
</li>
<li id="95ea3029_721c_451c_93d0_268f95ef88ec" class="navbar_item navbar_item_enable li_element">
<a>夏津县</a>
</li>
<li id="a8335dc0_f16d_46a6_8a34_32f3e03f9485" class="navbar_item navbar_item_enable">
<a>后屯乡镇</a>
</li>
</ul>
</div>
</div>
</div>
*{
list-style: none;
padding: 0;
margin: 0;
box-sizing:border-box;
font-size: 14px;
color: #333;
}
.systemSelect{
width: 340px;
height: 38px;
position: relative;
padding-top: 8px;
padding-left: 4px;
border:1px solid #32b16c;
float: left;
}
.scrollNavBox{
height: 20px;
width: 100%;
overflow: hidden;
}
.scrollUnitNav{
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.scrollUnitNav ul{
width: 560px;
min-width: 100%;
}
.scrollUnitNav ul li{
float: left;
margin: 0px 2px 0px 0px;
padding: 0px 0px;
}
.scrollUnitNav ul li:after{
content: "/";
color: #ccc;
background: none;
vertical-align: top;
display: inline-block;
width: 10px;
height: 14px;
margin-left: 3px;
}
.scrollUnitNav ul li a{
padding: 2px 4px;
border-radius: 2px;
border: none;
color: #333;
margin: 1px;
cursor: pointer;
}
window.onload = function(){
// 设置nav导航滚动+++++++++++++++++++
var horwheel = require('horwheel'),
view = document.getElementById('scrollUnitNav');
horwheel(view,120);
}