如何解決捲軸樣式問題

相信很多同仁都曾為各種瀏覽器的捲軸樣式困惑過，而且不同的瀏覽器預設的捲軸樣式還不一致。網路上也有很多說法修改捲軸樣式，但是大多數都是濫竽充數。今天我只說乾貨，純乾貨，乾貨來自於我的一位同事的推薦，在此，感謝同事，謝謝。

第一步：你需要在樣式標籤中插入以下程式碼

/* 设置滚动条的样式 */
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 5px;
    }
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }

第二步：為容器加上樣式

overflow :auto;（或overflow-y:auto;或overflow-x:auto;）

#效果就不貼出來了，讓你親自見證奇蹟的時刻！沒效果歡迎丟磚~

以上是如何解決捲軸樣式問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！