Beautify your scroll bar with CSS

This article will show you how to use CSS to modify / beautify the scrollbars that appear on browser pages. Change their colors, adjust their shapes, and adapt to your UI design. We will first look at the CSS properties provided by the WebKit browser. Finally, we will introduce how to support other types of browsers with jQuery.

Support of various browsers for CSS scrollbars

The WebKit browsers mentioned here include Google browser, Apple’s Safari browser and the latest opera browser. These browsers together account for more than half of the desktop browser market share. For mobile browser, it is basically the world of Google browser and safari browser. The only regret is that there is no improvement on the CSS scroll bar property in the browser. As for Internet Explorer, let’s look forward to it.

In view of the current situation of the browser market, we are confident that the CSS scroll bar beautification function will have a very good and bright future.

Watch the demoWhere will the scroll bar appear

Before really starting to explain the CSS scroll bar, let’s make a simple demo page; a page with scroll bar. Scroll bars usually appear in these places:

Browser border, when the page content exceeds the browser window sizeTextarea, too much contentiframeDiv or any block element, when their values are set to the overflow attribute.

For our demo page, the following HTML codes are used:

<div class="container">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

    <p>Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.</p>
    
    <p>Praesent sodales, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut consequat nisi posuere id. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Sed accumsan erat quis mi luctus porta.</p>

    <p>Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend felis sit amet eros vehicula aliquet. Pellentesque fringilla metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.</p>

    <p>Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus in massa arcu, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum in enim vitae metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit in mauris. Aenean quis risus ante. Donec bibendum erat a sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula at libero.</p>

</div>

In fact, there is only one div element, but because there are too many contents, scroll bars appear. The initial CSS style we gave it was fixed height and width, so that it appeared horizontal and vertical scrollbars

	.container {
		  width: 400px;
		  height: 300px;
		  background-color: #DCDCDC;
		  overflow: scroll; /* 让它显示滚动条 */
	}

Its original display effect is like this:

firefox

Beautify scroll bar with CSS

Google browser has been supporting CSS beautification of scrollbars for many years. These exclusive CSS attributes of WebKit browser need to use – WebKit – browser engine prefix. We will only use some basic CSS scroll bar attributes here, and add some necessary explanations in the code.

	::-webkit-scrollbar {
		  width: 15px;
	} /* 这是针对缺省样式 (必须的) */

when pseudo element styles appear in CSS, WebKit engine will turn off its default scroll bar style output and only use the style information provided in CSS. – surfin’ safari

Here are some other pseudo element styles:

	::-webkit-scrollbar-track {
		  background-color: #b46868;
	} /* 滚动条的滑轨背景颜色 */

	::-webkit-scrollbar-thumb {
		  background-color: rgba(0, 0, 0, 0.2); 
	} /* 滑块颜色 */

	::-webkit-scrollbar-button {
		  background-color: #7c2929;
	} /* 滑轨两头的监听按钮颜色 */

	::-webkit-scrollbar-corner {
		  background-color: black;
	} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

If you know why you use double quotation marks to mark pseudo elements here, please see the explanation in understanding: before and: after pseudo elements.

Add these CSS attributes, you will see the following effect (again, you need to use WebKit browser, such as Google browser to see the effect).

chrome

IE browser has its own scroll bar CSS attribute!

You may be surprised that IE browser is the first browser to support CSS customization of scroll bar appearance. It was supported as early as ie5.5, but it only supports color change.

These attributes are still used today. Take a look at the demo effect in IE9

  body {
      scrollbar-face-color: #b46868;
  }

It will look like this:

ie

Compatible with non WebKit browsers

Google browser users are the happiest. But we can’t give up the users of Firefox and Internet Explorer. For these browsers, a very effective remedy is to use JavaScript plugins. Many people on the Internet recommend JScrollPane, a jQuery plugin developed by Kelvin luck. However, some people commented that the plugin is “pita”. I looked at the dictionary and found that “pita” in Chinese means “painful”. After trial, I feel it is really painful. It is not recommended. I found another plugin, malihu custom scroll plugin, which is quite good

<link rel="stylesheet" href="js/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css">
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>

<script src="js/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>

<script>
if (!$.browser.webkit) {

					$.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default
					$.mCustomScrollbar.defaults.axis="yx"; //enable 2 axis scrollbars by default
					
					$(".container").mCustomScrollbar({theme:"dark"});
}
</script>

Screenshot of the effect in Firefox browser:

firefox_jscrollpane

Watch the demosummary

Many websites have used these CSS beautification techniques, especially some Google applications and websites, such as Gmail and Google +. I believe that very soon, Firefox browser and IE browser will also provide their own solutions. If you have a beautiful example of CSS beautification using scroll bar, please leave it in the comments for everyone to enjoy. Thank you.

Related Article
WordPress 3D rotating tag cloud

This 3D tag cloud is not the flash version of WP cumulus n years ago. This 3D rotating tag cloud Read more

Using wampserver tool to build local PHP + MySQL environment

No matter whether we use domestic space or foreign hosts, we prefer to go online after local debugging before setting Read more

How to install Linux system on Android phone

In our daily use of Android mobile phones, the installation of a complete Linux system will make mobile phones become Read more

How to backup your website data with Android phone

No matter what you do, backup is very necessary and important. Backup is just in case. Most of the time, Read more

Leave a Reply

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

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image