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 styletag

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