CSS3 features modify (custom) default browser scroll bar, css3 scroll bar

CSS3 features modify (custom) default browser scroll bar, css3 scroll bar

When we are working on the front-end, we may encounter some requirements. We need to rewrite the scroll bar style of the default browser. What has it done? It doesn't bring the user experience. It's just a good look! The implementation principle is actually using pseudo elements. The pseudo elements of webkit are very powerful. You can define the scroll bar as a page element, and combine some CSS3 attributes, such as rounded corners, gradient, and rgba. The most common pseudo elements are the elements we are most familiar with before and after (: before/: after) [pseudo classes (: hover/: link )]. Here is a Demo. Let's take a look...

I. HTML

<div class="banner_box"></div>

Ii. CSS

<Style>. banner_box {width: 100%; height: 2000px;}/* scroll bar style * // * overall part of the scroll bar */:-webkit-scrollbar {width: 8px ;} /* Small scroll bar */:-webkit-scrollbar-thumb {background-color: rgba (0, 0, 0, 0.6);-webkit-border-radius: 5px; /* Safari and Chrome */-moz-border-radius: 5px;/* Firefox */-o-border-radius: 5px;/* Opera */border-radius: 5px;}/* buttons at both ends of the rolling track */:-webkit-scrollbar-button {-webkit-box-shadow: inset 0 0 6px rgba (, 85, 1 ); /* border-radius: 10px; */background-color: #555;}/* rolling track shadow */:: -webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba (255,255,255, 1);/* border-radius: 10px; */background-color: # F5F5F5 ;}</style>

 

Iii. Results

 

Summary: This CSS feature is not compatible with IE and Firefox, but can be seen by others. There is also a way to rewrite the scroll bar through div.