如何让移动端出现横向滚动条_移动端强制显示滚动条

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

}