基于JavaScript实现自定义滚动条
网络编程 发布日期：2025/11/11 浏览次数：1
正在浏览：基于JavaScript实现自定义滚动条
可直接使用的js滚动条，先看看效果图：
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义滚动条</title>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动条</title>
<style type="text/css">
*{ margin:0; padding:0;}
#mainBox{
width:400px;
height:500px;
border:1px #bbb solid;
position:relative;
overflow:hidden;
margin:50px auto;
}
#content{
height:2500px;
position:absolute;
left:0;
top:0;
background:url(https://timgsa.baidu.com/timg"mainBox">
<div id="content"></div>
</div>
<script type="text/javascript">
var doc=document;
var _wheelData=-1;
var mainBox=doc.getElementById('mainBox');
function bind(obj,type,handler){
var node=typeof obj=="string""string""px";
p.style.height=_height+"px";
p.style.left=_left+"px";
p.style.position="absolute";
p.style.background="#ccc";
contentBox.style.width=(mainBox.offsetWidth-_scrollWidth)+"px";
var _scrollHeight=parseInt(_height*(_height/conHeight));
if(_scrollHeight>=mainBox.clientHeight){
element.parentNode.style.display="none";
}
element.style.height=_scrollHeight+"px";
},
//拖动滚动条
_tragScroll:function(element,mainBox,contentBox){
var mainHeight=mainBox.clientHeight;
element.onmousedown=function(event){
var _this=this;
var _scrollTop=element.offsetTop;
var e=event||window.event;
var top=e.clientY;
//this.onmousemove=scrollGo;
document.onmousemove=scrollGo;
document.onmouseup=function(event){
this.onmousemove=null;
}
function scrollGo(event){
var e=event||window.event;
var _top=e.clientY;
var _t=_top-top+_scrollTop;
if(_t>(mainHeight-element.offsetHeight)){
_t=mainHeight-element.offsetHeight;
}
if(_t<=0){
_t=0;
}
element.style.top=_t+"px";
contentBox.style.top=-_t*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";
_wheelData=_t;
}
}
element.onmouseover=function(){
this.style.background="#444";
}
element.onmouseout=function(){
this.style.background="#666";
}
},
//鼠标滚轮滚动，滚动条滚动
_wheelChange:function(element,mainBox,contentBox){
var node=typeof mainBox=="string""px";
wheelFlag=_wheelData*12;
_wheelData=-1;
}else{
flag=wheelFlag/12;
}
if(flag<=0){
flag=0;
wheelFlag=0;
}
if(flag>=(mainBox.offsetHeight-element.offsetHeight)){
flag=(mainBox.clientHeight-element.offsetHeight);
wheelFlag=(mainBox.clientHeight-element.offsetHeight)*12;
}
element.style.top=flag+"px";
contentBox.style.top=-flag*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";
});
}
},
_clickScroll:function(element,mainBox,contentBox){
var p=element.parentNode;
p.onclick=function(event){
var e=event||window.event;
var t=e.target||e.srcElement;
var sTop=document.documentElement.scrollTop>0"px";
contentBox.style.top=-_top*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";
_wheelData=_top;
}
}
}
}
new addScroll('mainBox','content','scrollDiv');
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：canvas知识总结