不是第一

第二种滚动条scrollbar

页面引入html界面

<embed src="./index.html"  type="text/html" width="800px" height="600px">

自定义滚动条图片


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3自定义滚动条图片版 </title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	#container{
		width: 100%;
		height: 1200px;
		line-height: 600px;
		text-align: center;
		background: #ccc;
	}
	/*定义滚动条的高宽*/
	::-webkit-scrollbar {
	    width: 16px;
	    height: 16px;
	}
	/*CSS的坐标系，左上角为(0,0),往右往下为增加，往上往左为减少*/
	/*显示滚动条上方的渐增按钮*/
	::-webkit-scrollbar-button:start:decrement,
	/*显示滚动条上方的渐减按钮*/
	::-webkit-scrollbar-button:end:increment {
	    display: block;
	}
	/*隐藏滚动条上方的渐增按钮*/
	::-webkit-scrollbar-button:vertical:start:increment,
	::-webkit-scrollbar-button:vertical:end:decrement {
	    display: none;
	}
	/* 定义滚动条渐增按扭的样式 */
	::-webkit-scrollbar-button:end:increment {
	    background-image: url(./images/scroll_cntrl_dwn.png);
	}
	/* 定义滚动条渐减按扭的样式 */
	::-webkit-scrollbar-button:start:decrement {
	    background-image: url(./images/scroll_cntrl_up.png);
	}
	/* 垂直滚动条的第三层轨道的上段 */
	::-webkit-scrollbar-track-piece:vertical:start {
	    background-image: url(./images/scroll_gutter_top.png), url(./images/scroll_gutter_mid.png);
	    background-repeat: no-repeat, repeat-y;
	}
	/* 垂直滚动条的第三层轨道的下段 */
	::-webkit-scrollbar-track-piece:vertical:end {
	    background-image: url(./images/scroll_gutter_btm.png), url(./images/scroll_gutter_mid.png);
	    background-repeat: no-repeat, repeat-y;
	    background-position: bottom left, 0 0;
	}
	/* 垂直滚动条的滑动块 */
	::-webkit-scrollbar-thumb:vertical {
	    height: 56px;
	    -webkit-border-image: url(./images/scroll_thumb.png) 8 0 8 0 stretch stretch;
	    border-width: 8 0 8 0;
	}

	</style>
</head>
<body>
	<div id="container">CSS3自定义滚动条图片版<br/>请在chrome下看右侧滚动条，其他浏览器没有效果哦</div>
</body>
</html>