<meta charset="utf-8">
例如：
需求：导航栏实现横向滑动,适应移动端，当滑动到最后时，图标隐藏
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;
}
<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(可视宽度)
网友评论