巩固一下js基础知识:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>滚动条</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper {
width: 400px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
position: relative;
}
.content{
width: 365px;
padding:5px;
position: absolute;
top: 0;
left: 0;
}
.rt{
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 100%;
border: 1px solid #000;
}
.rt .up{
width: 30px;
height: 30px;
position: absolute;
top:0;
left: 0;
}
img{
width: 100%;
height: 100%;
}
.rt .down{
width: 30px;
height: 30px;
position: absolute;
bottom:0;
left: 0;
}
.blur {
position: absolute;
top: 30px;
left:0;
width: 30px;
/* height: 100px; */
cursor: pointer;
background-color:red;
}
</style>
</head>
<body>
<div class="wrapper" id="_wrapper">
<div class="content" id="_content">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
<div class="rt">
<div class="blur" id="_blur"></div>
<span class="up" id="_up"> <img src="img/up.png" alt=""></span>
<span class="down" id="_down"><img src="img/down.png" alt=""></span>
</div>
</div>
</body>
</html>
<script>
var wrapper = document.getElementById('_wrapper');
var content = document.getElementById('_content');
var blur = document.getElementById('_blur');
var up = document.getElementById('_up');
var down = document.getElementById('_down');
console.log(wrapper.offsetHeight);
// 滚动条盒子的高度
blur.style.height = wrapper.offsetHeight / content.offsetHeight*wrapper.offsetHeight + 'px';
//滚动条移动
blurmove(blur);
// 点击上下箭头移动
spanmove(blur);
function contentmove(obj,heightnum){
content.style.top = -[(content.offsetHeight - wrapper.offsetHeight) / (wrapper.offsetHeight -obj.offsetHeight- 60)* heightnum]+ 'px';
}
function spanmove(obj){
var num = 5;
up.onclick = function(){
if(obj.offsetTop <= 30)
{
obj.style.top = 30 + 'px';
}
obj.style.top = obj.offsetTop - num + 'px';
contentmove(obj,obj.offsetTop -25);
}
down.onclick = function(){
if(obj.offsetTop >= wrapper.offsetHeight - 30 - obj.offsetHeight)
{
obj.style.top = wrapper.offsetHeight - 30 - obj.offsetHeight + 'px';
}
obj.style.top = obj.offsetTop + num + 'px';
// 内容盒子移动
contentmove(obj,obj.offsetTop - 35);
}
}
function blurmove(obj){
obj.onmousedown = function(event){
var event = event || window.event;
var currentTop = obj.offsetTop;
// 记下当前鼠标按下的位置
var clientY = event.clientY;
document.onmousemove = function(event){
var event = event || window.event;
var nowY = event.clientY;
var targetnum = nowY - clientY + currentTop;
if(targetnum <30 )
{
targetnum = 30 ;
}
else if( targetnum > wrapper.offsetHeight -30 - obj.offsetHeight )
{
targetnum = wrapper.offsetHeight - 30 - obj.offsetHeight;
}
obj.style.top = targetnum +'px';
contentmove(obj,targetnum -30);
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
}
</script>