需求:由于列表数据太长,超过页面长度,所以需要给列表加入滚动条,但由于原生滚动条太丑,所以需要隐藏滚动条

滚动条实现

通过设置height属性值,配上overflow属性可以实现在超过长度时页面出现导航条

1
2
3
4
//overflow属性值为auto或scroll都可以出现导航条
<ul style="height:500px;overflow-y:auto;width:380px">

</ul>
导航条隐藏

法1:使用css方法(适用于chrome,存在兼容性问题)

1
2
3
ul::-webkit-scrollbar {
display: none;
}

法2:在ul外层再加一个div,通过设置宽度和overflow属性在视觉上将导航条隐藏(使用)

1
2
3
4
5
<div style="overflow:hidden;width:360px">
<ul style="height:500px;overflow-y:auto;width:380px">

</ul>
</div>

法3:将导航条宽度设置极小,视觉隐藏

1
2
3
4
::-webkit-scrollbar {
width: 1px;
height: 1px;
}