<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #scroll-1 { width:200px; height:200px; overflow-y:auto; overflow-x: hidden; } #scroll-1 div { width:400px; height:400px; } #scroll-1::-webkit-scrollbar { width:8px; height:8px; } #scroll-1::-webkit-scrollbar-button { background-color:#F4F4F4; } #scroll-1::-webkit-scrollbar-track { background:#F4F4F4; } #scroll-1::-webkit-scrollbar-thumb{ background:#C7C7C7; border-radius:4px; } /*#scroll-1::-webkit-scrollbar-track-piece { background:url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png); }*/ /*#scroll-1::-webkit-scrollbar-corner { background:#82AFFF; } #scroll-1::-webkit-scrollbar-resizer { background:#FF0BEE; }*/ </style> </head> <body> <div id='scroll-1'> <div > <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。 小天地，大世界是一个Web前端的技术博客。 主要是关于 HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还 包含一些PHP语言等的实用例子。</p> <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。 小天地，大世界是一个Web前端的技术博客。 主要是关于 HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还 包含一些PHP语言等的实用例子。</p> <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。 小天地，大世界是一个Web前端的技术博客。 主要是关于 HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还 包含一些PHP语言等的实用例子。</p> <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。 小天地，大世界是一个Web前端的技术博客。 主要是关于 HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还 包含一些PHP语言等的实用例子。</p> <p>请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。 小天地，大世界是一个Web前端的技术博客。 主要是关于 HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还 包含一些PHP语言等的实用例子。</p> </div> </div> </body> </html>
转自：http://www.lyblog.net/detail/314.html