例如：
需求：导航栏实现横向滑动,适应移动端，当滑动到最后时，图标隐藏
css实现滑动效果：
style样式：
.scrollContainer{overflow:auto}
.box{
display:box
display:-webkit-box//也可使用display:flex
height:"40px"
}
.box span{
display: block !important//这是重点！！
width:"60px",
height: "40px"
line-height: "40px"
text-align:center
}
<div class="scrollContainer">
<div class="box">
<span>HT</span>
<span>CTC</span>
<span>SLT</span>
<span>AET</span>
<span>LET</span>
</div>
</div>
js中实现滑动效果：
思路：
当（滑动的距离=总滑动宽度-可视宽度 || 滑动的距离>总滑动宽度-可视宽度）时，隐藏图标，相反显示
domElement.scrollLeft(滑动距离)
domElement.scrollWidth(总滑动宽度-可视宽度)
domElement.clientWidth(可视宽度)
依靠css 将页面document.documentElement.style.overflow='hidden'
document.body.style.overflow='hidden'//手机版设置这个。
如果设置了如上，页面的滚动条将会消失，此时鼠标滚轮失效。
1、首先输入下方的代码：
$(window).scroll(function () {
var $nav = $(".floatingMenu ul li"),
length = $nav.length-1,//获取导航菜单 ul li 的个数
item = new Array(),//新建一个数组
sTop = $(window).scrollTop()//获取偏移的高度
for (var i = 0i <lengthi++) {
2、然后输入下方的代码：
if (i == 0) {
item[i + 1] = $(".blockList>div:first-child").offset().top
if (sTop >= item[i + 1]) {
$nav.eq(i).addClass("selected").siblings("li").removeClass("selected")//选中的样式selected
}
} else {
3、然后输入下方的代码：
item[i + 1] = $(".blockList>div:nth-child(" + (i + 1) + ")").offset().top
if (sTop >= item[i + 1] - 100) {
$nav.eq(i).addClass("selected").siblings("li").removeClass("selected")
}
}
}
})
4、然后就可以了。
