移动端强制显示滚动条

更新日期: 2020-05-25 阅读次数: 10544 字数: 211 分类: CSS

例如在手机移动端,一个表格的列数过多,会超出屏幕宽度。所以通常会限制 table 的宽度。

.long_table {
  width: 100%;
  overflow-x: auto;
}

但是,限制之后显示是正常了。但是手机浏览器一个默认的体验不太好,就是默认不显示横向滚动条。 只有在拖动的时候才会显示,只要不移动,一会就会消失。

这样,会导致部分用户以为只有部分数据,不会主动去滑动查看更多数据。

所以,需要强制显示滚动条

.long_table::-webkit-scrollbar {
  width: 5px;
  height: 13px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.long_table::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  min-height: 28px;
}

.long_table::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

微信关注我哦 👍

大象工具微信公众号

我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式