How to solve scrollbar style issues

I believe many colleagues have been confused by the scroll bar styles of various browsers, and the default scroll bar styles of different browsers are not consistent. There are many opinions on the Internet about modifying the scroll bar style, but most of them are superficial. Today I will only talk about practical information, pure practical information. The practical information comes from the recommendation of one of my colleagues. Here, I would like to thank my colleague, thank you.

Step one: You need to insert the following code in the stylec9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 tag

/* 设置滚动条的样式 */
    ::-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);
    }

Step two: Add styles to the container

overflow :auto; (or overflow-y:auto; or overflow-x:auto;)

The effect will not be posted, so you can witness the miraculous moment in person! If it doesn’t work, feel free to drop a brick~

The above is the detailed content of How to solve scrollbar style issues. For more information, please follow other related articles on the PHP Chinese website!