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