导航栏实现横向滑动效果

例如：

需求：导航栏实现横向滑动,适应移动端，当滑动到最后时，图标隐藏

clipboard.png

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;

}

HT

CTC

SLT

AET

LET

js中实现滑动效果：

思路：

当（滑动的距离=总滑动宽度-可视宽度 || 滑动的距离>总滑动宽度-可视宽度）时，隐藏图标，相反显示

domElement.scrollLeft(滑动距离)

domElement.scrollWidth(总滑动宽度-可视宽度)

domElement.clientWidth(可视宽度)