如何讓移動端出現橫向滾動條 移動端強制顯示滾動條

2021-10-13 07:52:07 字數 837 閱讀 1031

例如在手機移動端,乙個**的列數過多,會超出螢幕寬度。所以通常會限制 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;

移動端去除橫向滾動條

在手機上逛一些電商 或者其他相同型別的 時,會遇到橫向滑動的商品。如京東 等電商 下。我們知道,這一般情況下為某個元素設定overflow auto做到,表示橫向或者豎向依據內容的多少自動出現滾動條。但是,在頁面中間出現橫向滾動條是十分不好看的.在不使用任何外掛程式的情況下,可以使用原生css的方法...

移動端顯示滾動條以及滾動條的監聽事件

1 移動端顯示滾動條 在移動端滾動條缺省會隱藏,如何顯示呢 需要新增以下 了。並且需要給body或者外層盒子新增 rows 類名,這樣滾動條就可以顯示出來了 rows rows webkit scrollbar track piece rows webkit scrollbar rows webki...

移動端左右滑動以及滾動條

對於移動端左右滑動以及滾動條 測試文字,左右滾動時,這裡不會動 1 當文字長度超出之後 overflow x auto 屬性自動產生橫向滾動條 overflow x屬性指定如果它溢位了元素的內容區是否剪輯左 右邊緣內容。使用overflow y屬性來判斷頂部和底部邊緣是否裁剪。overflow x ...