How to customize the overflow ::webkit-scrollbar?


In our application, the overflow property is often used. When this property takes effect, the ::-webkit-scrollbar will appear, but the default ::-webkit-scrollbar of the system is always very wide, resulting in fewer parts of the page that can display valid information, so we need to modify the overflow ::-webkit-scrollbar and ::-webkit-scrollbar-thumb style, make it narrower, modify the color of the ::-webkit-scrollbar-track if necessary, etc.

Keywords: ::-webkit-scrollbar , ::-webkit-scrollbar-thumb , ::-webkit-scrollbar-track.


As shown in the figure below, the area occupied by the default navigation bar is too wide, and we need to modify its style. The modified style is narrower and better-looking.

default style

modified style


The css code of ::-webkit-scrollbar.

								::-webkit-scrollbar {
				height: 8px !important;
				width: 8px !important;
			/*defines the style of the scroll bar*/
			::-webkit-scrollbar-thumb {
				border-radius: 2px;
				border-style: dashed;
				background-color: #fbbd08;
				border-color: #e2242400;
				border-width: 1.5px;
				background-clip: padding-box;
			/*defines the style of the track*/
			::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
				border-radius: 10px;
				background: #EDEDED;
			::-webkit-scrollbar-thumb:hover {
				background-color: rgba(0, 0, 0, 0.2)



The default overflow -webkit-scrollbar style of the system is not good enough, and in many cases, it will reduce the effective area of the page for displaying. You can modify ::-webkit-scrollbar , ::-webkit-scrollbar-thumb , ::-webkit-scrollbar-track , ::-webkit-scrollbar-thumb:hover style in the CSS code to change.

Related articles

Coming soon

If yuo have any question or need any help 

you can leave a comment or connect me with

Edit Template

Leave a Reply

Your email address will not be published. Required fields are marked *

Chaoxu Wei

Master student at Tongji University (Writer & Blogger)

Job hunting, both part-time and full-time jobs are accepted. Job recommendation please email me, thank you very much!


Edit Template

“There are many people in the world who want to work hard but can’t, and people who work too hard and are exhausted. Please don’t use your efforts only to chase your own victory, please use them to help others.”




Yangpu District, Shanghai