列表加入滚动条并隐藏滚动条

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

滚动条实现

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

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

</ul>

导航条隐藏

法1：使用css方法（适用于chrome，存在兼容性问题）

ul::-webkit-scrollbar {
        display: none;
}

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

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

  </ul>
</div>

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

::-webkit-scrollbar {
   width: 1px;
   height: 1px;
}

我的博客主页 ：https://qingmuzhang.gitee.io/