图片与JavaScript配合做出个性滚动条

313 阅读 0 评论 207 点赞

我是靠谱客的博主自信水池，这篇文章主要介绍图片与JavaScript配合做出个性滚动条，现在分享给大家，希望可以做个参考。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>图片与JavaScript配合做出个性滚动条</title> 
<style type="text/css"> 
* { margin:0; padding:0; } 
body { margin:20px 0 400px 20px; font:12px Arial; } 
h1 { font-size:14px; } 
ol { margin:20px; line-height:160%; } 
#out { 
position:relative; 
width:500px; 
height:300px; 
margin:100px 0 100px 80px; 
border:1px solid #369; 
overflow:hidden; 
} 
#content { 
width:520px; 
height:100%; 
overflow:auto; 
-moz-user-select:none; 
} 
#scrollBar,#scrollBarHandle,.scroll_bar_top,.scroll_bar_top_a,.scroll_bar_bottom,.scroll_bar_bottom_a { 
background-image:url(http://files.uoften.com/demoimg/200910/un_bg_scrollBar.gif); 
} 
#scrollBar { 
position:absolute; 
top:0; 
right:0; 
z-index:9; 
width:14px; 
height:100%; 
background-repeat:repeat-y; 
background-position:-42px 0; 
float:left; 
} 
#scrollBarTop,#scrollBarHandle,#scrollBarBottom { 
position:absolute; 
left:0; 
cursor:default; 
} 
#scrollBarTop,#scrollBarBottom { 
width:100%; 
height:14px; 
color:#fff; 
text-align:center; 
} 
#scrollBarTop { top:0; } 
#scrollBarBottom { bottom:0; } 
#scrollBarHandle { width:100%; background-repeat:repeat-y; background-position:-28px 0; } 
.scroll_bar_top { background-position:0 0; } 
.scroll_bar_top_a { background-position:-14px 0; } 
.scroll_bar_bottom { background-position:-56px 0; } 
.scroll_bar_bottom_a { background-position:-70px 0; } 
</style> 
</head> 
<body> 
<div id="out"> 
<div id="content"> 
fsdfs fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 
</div> 
<div id="scrollBar"> 
<div id="scrollBarTop" class="scroll_bar_top"></div> 
<div id="scrollBarHandle"></div> 
<div id="scrollBarBottom" class="scroll_bar_bottom"></div> 
</div> 
</div> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]