移动端强制显示滚动条

例如在手机移动端，一个表格的列数过多，会超出屏幕宽度。所以通常会限制 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 聊聊， 查看更多联系方式