导航栏实现横向滑动效果

<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(可视宽度)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容