<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>自定义滚动条</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#wrap{
width: 300px;
height: 200px;
overflow: hidden;
border: 1px slid olive;
padding-right: 15px;
padding-bottom: 15px;
margin: 100px auto;
position: relative;
}
img{position: absolute; width: 730px;}
#scroll-x{width: 315px;height: 15px;background: grey;position: absolute;left: 0;bottom: 0;}
#scroll-y{width: 15px;height: 215px;background: grey;position: absolute;right: 0;top: 0;}
#tag-x{width: 15px;height: 15px;background: orange;position: absolute;bottom: 0;left: 0;}
#tag-y{width: 15px;height: 15px;background: orange;position: absolute;top: 0;right: 0;}
</style>
</head>
<body>
<div id="wrap">
<img id="img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493991722334&di=39eead9f568bc2d45ad858d4f7fa3922&imgtype=0&src=http%3A%2F%2Fimg.tuku.cn%2Ffile_big%2F201403%2F5683a05250db40b983f24a4e52f630f5.jpg"/>
<div id="scroll-x">
<div id="tag-x"></div>
</div>
<div id="scroll-y">
<div id="tag-y"></div>
</div>
</div>
</body>
<script type="text/javascript">
var oWrap = document.getElementById('wrap');
var oImg = document.getElementById('img');
var oScrollX = document.getElementById('scroll-x');
var oScrollY = document.getElementById('scroll-y');
var oTagX = document.getElementById('tag-x');
var oTagY = document.getElementById('tag-y');
//左右
//鼠标滚轮滚动
if(oWrap.addEventListener){
oWrap.addEventListener('mousewheel',oImgScroll,false);
oWrap.addEventListener('DOMMouseScroll',oImgScroll,false);
}else{
oWrap.attachEvent('onmousewheel',oImgScroll,false);
}
function oImgScroll(e){
e = e ||event;
var speed = 10;
var isUp;
if(e.wheelDelta){ //IE Chrome
isUp = e.wheelDelta > 0 ? true : false;
} else{ //FF
isUp = e.dedail < 0 ? true : false;
}
if(isUp){
speed = -speed;
}
var left = oTagX.offsetLeft + speed;
if(left < 0){
left = 0;
} else if(left > oScrollX.offsetWidth - 15 - oTagX.offsetWidth){
left = oScrollX.offsetWidth - 15 - oTagX.offsetWidth;
}
oTagX.style.left = left + 'px';
var scale = left/(oScrollX.offsetWidth - oTagX.offsetWidth-15);
var nImgLeft = (oImg.offsetWidth - oWrap.offsetWidth-15+2)*scale;
oImg.style.left = -nImgLeft + 'px';
}
//点击滚动
oTagX.onmousedown = function(e){
e = e ||event;
var disX = e.clientX - oTagX.offsetLeft;
document.onmousemove = function(e){
e = e ||event;
var left = e.clientX - disX;
if(left < 0){
left = 0;
} else if(left > oScrollX.offsetWidth - 15 - oTagX.offsetWidth){
left = oScrollX.offsetWidth - 15 - oTagX.offsetWidth;
}
oTagX.style.left = left + 'px';
var scale = left/(oScrollX.offsetWidth - oTagX.offsetWidth-15);
var nImgLeft = (oImg.offsetWidth - oWrap.offsetWidth-15+2)*scale;
oImg.style.left = -nImgLeft + 'px';
return false;//去除默认样式
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
if(e.preventDefault){
e.preventDefault();
}
};
//上下点击滚动
oTagY.onmousedown = function(e){
var e = e ||event;
var disY = e.clientY - oTagY.offsetTop;
oTagY.onmousemove = function(e){
var e = e ||event;
var top = e.clientY - disY;
if (top < 0){
top = 0;
} else if(top > oScrollY.offsetHeight - oTagY.offsetHeight-15){
top = oScrollY.offsetHeight - oTagY.offsetHeight -15;
}
oTagY.style.top = top + 'px';
var scale = top/(oScrollY.offsetHeight - oTagY.offsetHeight-15);
var oImgTop = scale *(oImg.offsetHeight - oWrap.offsetHeight-15+2);
oImg.style.top = -oImgTop + 'px';
return false;
}
oTagY.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
if(e.preventDefault){
e.preventDefault();
}
}
</script>
</html>
js实现自定义滚动条
最新推荐文章于 2023-11-30 17:53:36 发布