前端ABC做页面的老铁们应该都觉得浏览器自带的滚动条不好看吧.但是直接去改默认的滚动条又不好改.
所以有时候我们只能自定义滚动条,方便我们的操作,做出我们想要的样子.
下面是我写的一个自定义滚动条….样式不好看.主要是想给大家看一下功能.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>qdabc.cn</title>
<style>
#peripheral{
height: 500px;
width: 15px;
background: #1cafbc;
border-radius: 10px;
position: absolute;
left: 485px;
display: none;
}
#move{
width: 15px;
height: 40px;
background: #eee;
border-radius: 10px;
position: absolute;
}
#content{
height: 500px;
width: 500px;
position: relative;
overflow: hidden;
margin: 50px auto;
}
#content_body{
position: absolute;
left: 0;
padding-right:15px ;
}
</style>
</head>
<body>
<div id="content">
<div id="content_body">
我不忍心去打扰这种宁静且又美好的画面，静静的伫立在白杨树下，回想着曾经，回想着儿时的美好。忽然一股风向我这边吹来，卷起了几片落叶，我在风里极力的揪抓叶子——总算是皇天不负有心人，终于让我抓到了一片叶子。我轻轻的将它含再嘴里，怎么回事儿?有点苦，有点涩，又带着些许的甜……我又细细品味了一回。噢!原来是我童年里的味道。
大西北这儿似乎只有山大沟深，这儿似乎只有尘土满天飞，只有黄土地……但我却一点儿也不厌倦这种环境，因为正是这深深的山沟，满天飞扬的尘土，厚重的黄土情才养育了我。所以我的家乡总是多山少水，多土少绿;因此在我记忆的深处，反复存留得只有这棵白杨树的影子。但现在它的影子似乎已经与记忆中的不再相同。
树干已不是那些年的嫩白了，许是经过了岁月的洗礼，让让它变得更加遒劲了。让曾经见过它的人，都不禁产生一种莫名的，沧桑的伤感。
天际的一片云彩飘过，夕阳投下了它耀人却温和的光，在稀疏的枝条上穿行着，在树枝的最顶端洒下几点零零碎碎的影子。而自己尽管置身其间，却如同梦幻，仿佛一个人在捡拾这遒枝剪碎的阳光。
此时，我的心静了。曾经出现在我生命中的，那些所谓的名和利，那些成功与失败，那些困扰我，让我失望和绝望，此刻似乎都与我隔绝。只留了一个淡然纯真的我，只留下一段段童年时关于我和白杨树的美我不忍心去打扰这种宁静且又美好的画面，静静的伫立在白杨树下，回想着曾经，回想着儿时的美好。忽然一股风向我这边吹来，卷起了几片落叶，我在风里极力的揪抓叶子——总算是皇天不负有心人，终于让我抓到了一片叶子。我轻轻的将它含再嘴里，怎么回事儿?有点苦，有点涩，又带着些许的甜……我又细细品味了一回。噢!原来是我童年里的味道。
大西北这儿似乎只有山大沟深，这儿似乎只有尘土满天飞，只有黄土地……但我却一点儿也不厌倦这种环境，因为正是这深深的山沟，满天飞扬的尘土，厚重的黄土情才养育了我。所以我的家乡总是多山少水，多土少绿;因此在我记忆的深处，反复存留得只有这棵白杨树的影子。但现在它的影子似乎已经与记忆中的不再相同。
树干已不是那些年的嫩白了，许是经过了岁月的洗礼，让让它变得更加遒劲了。让曾经见过它的人，都不禁产生一种莫名的，沧桑的伤感。
天际的一片云彩飘过，夕阳投下了它耀人却温和的光，在稀疏的枝条上穿行着，在树枝的最顶端洒下几点零零碎碎的影子。而自己尽管置身其间，却如同梦幻，仿佛一个人在捡拾这遒枝剪碎的阳光。
此时，我的心静了。曾经出现在我生命中的，那些所谓的名和利，那些成功与失败，那些困扰我，让我失望和绝望，此刻似乎都与我隔绝。只留了一个淡然纯真的我，只留下一段段童年时关于我和白杨树的美
</div>
<div id="peripheral">
<div id="move"></div>
</div>
</div>
<script>
window.onload=function(){
var per=document.getElementById("peripheral");
var move=document.getElementById("move");
var pro=document.getElementById("proportion");
var content=document.getElementById("content");
var content_body=document.getElementById("content_body");
if(content_body.offsetHeight>500){
per.style.display="block";
}
move.onmousedown=function(e){
var ev = e || window.event;
var distant=ev.clientY-move.offsetTop;
document.onmousemove=function(e){
var ev = e || window.event;
var number = ev.clientY-distant;
onmousemove1(ev,0,number)
};
document.onmouseup=function(e){
document.onmousemove=null;
document.onmouseup=null;
}
return false;
}
//滚动时候,文本的显示
function onmousemove1(ev,t,number){
//滚动条不能超出最上方
if(number<0){
move.style.top=0;
}else if(number>(per.offsetHeight-move.offsetHeight)){//滚动条不能超出最下方
move.style.top=per.offsetHeight-move.offsetHeight+"px";
}else{
move.style.top=number+t+"px";
}
//按照滚动的百分比显示文本内容的多少
var proportion = parseInt(move.style.top)/(per.offsetHeight-move.offsetHeight);
content_body.style.top=-(content_body.offsetHeight-500)*proportion+"px";
}
//滚轮事件
function scrollFunc(ev){
var t = move.offsetTop;
e=ev || window.event;
if(t<0){
onmousemove1(e,0,0)
}else if(t>(per.offsetHeight-move.offsetHeight)){
onmousemove1(e,0,per.offsetHeight-move.offsetHeight)
}else{
if(e.wheelDelta<0){//IE/Opera/Chrome
if(t!=(per.offsetHeight-move.offsetHeight)){
t+=10;
}
onmousemove1(e,t,0)
}
else if(e.wheelDelta>0){//Firefox
if(t!=0){
t-=10;
}
onmousemove1(e,t,0)
}
else if(e.detail>0){//Firefox
if(t!=(per.offsetHeight-move.offsetHeight)){
t+=10;
}
onmousemove1(e,t,0)
} else if(e.detail<0){//Firefox
if(t!=0){
t-=10;
}
onmousemove1(e,t,0)
}
}
}
/*注册事件*/
if(content.addEventListener){
content.addEventListener('DOMMouseScroll',scrollFunc,false);
}
content.onmousewheel=content.onmousewheel=scrollFunc;//IE/Opera/Chrome
}
</script>
</body>
</html>