<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿滾動條</title>
<style type="text/css">
#con_wrap {
width: 300px;
height: 300px;
margin:0 auto;
border:1px solid #333;
/*overflow: hidden;*/
position: relative;
}
#con {
position: absolute;
left: 0;
top: 0;
font-size: 1.2rem;
}
#scoll {
width: 800px;
height: 45px;
background-color: #fbf3ba;
position: absolute;
bottom: 65px;
left: 65px;
}
#scoll #scoll_sider {
width: 75px;
height: 45px;
background-color: red;
position: absolute;
left: 0;
}
#rate {
width: 70px;
height: 34px;
color:red;
position: absolute;
bottom: 5px;
left:50%;
margin-left: -35px;
}
</style>
</head>
<body>
<div id="con_wrap">
<div id="con">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ab voluptas eaque, veniam quos totam. Eos perferendis, porro nemo neque dignissimos aut corporis, illo amet vero debitis, tenetur possimus asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ab voluptas eaque, veniam quos totam. Eos perferendis, porro nemo neque dignissimos aut corporis, illo amet vero debitis, tenetur possimus asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ab voluptas eaque, veniam quos totam. Eos perferendis, porro nemo neque dignissimos aut corporis, illo amet vero debitis, tenetur possimus asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ab voluptas eaque, veniam quos totam. Eos perferendis, porro nemo neque dignissimos aut corporis, illo amet vero debitis, tenetur possimus asperiores.
</div>
</div>
<div id="scoll">
<div id="scoll_sider"></div>
</div>
<span id="rate">0%</span>
<script type="text/javascript">
var oScoll = document.getElementById('scoll');
var oSco_sider = document.getElementById('scoll_sider');
var oRate = document.getElementById('rate');
var oCon = document.getElementById('con');
var oCon_wrap = document.getElementById('con_wrap');
var disX2 = 0;
var rate = 0;
oSco_sider.onmousedown = function(ev){
var oEvent = ev||event;
disX2 = oEvent.clientX - oSco_sider.offsetLeft;
document.onmousemove = function(ev){
var oEvent = ev||event;
var l = oEvent.clientX - disX2;
if (l<0) {
l = 0;
}else if(l > (oScoll.offsetWidth - oSco_sider.offsetWidth)){
l = oScoll.offsetWidth - oSco_sider.offsetWidth;
}
oSco_sider.style.left = l + 'px';
rate = l/(oScoll.offsetWidth - oSco_sider.offsetWidth);
var temp = (rate*100).toFixed(2) + '%';
oRate.innerHTML = temp;
oCon.style.top = -rate*(oCon.offsetHeight - oCon_wrap.offsetHeight)+'px';
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
</script>
</body>
</html>js仿滾動條
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章