- html部分
<div class="box" id="box">
<div class="content" id="content">
床前明月光啊,明月光,疑是地上霜啊,举头
......
床前明月光啊,明月光,疑是地上霜啊,举头嘿嘿
</div><!--文字内容-->
<div id="scroll" class="scroll"><!--装滚动条的层-->
<div class="bar" id="bar"></div><!--滚动条-->
</div>
</div>
- css部分
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 500px;
border: 1px solid red;
margin: 100px;
position: relative;
overflow: hidden;
}
.content {
padding: 5px 18px 5px 5px;
position: absolute;
top: 0;
left: 0;
}
.scroll {
width: 18px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: #eee;
}
.bar {
height: 100px;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: red;
border-radius: 10px;
cursor: pointer;
}
- js部分
//获取元素
var box = my$("box");
var content = my$("content");
var scroll = my$("scroll");
var bar = my$("bar");
//设置滚动条的高度
//滚动条的高/装滚动条的div的高=box的高/文字div的高
//滚动条的高=装滚动条的div的高*box的高/文字div的高
var height = scroll.offsetHeight * box.offsetHeight / content.offsetHeight;
console.log(height);
bar.style.height = height + "px";
//鼠标滚动条按下事件
bar.onmousedown = function (e) {
//获取可视区域鼠标的纵坐标
var spaceY = e.clientY - bar.offsetTop;
console.log(spaceY);
//移动事件
document.onmousemove = function (e) {
var y = e.clientY - spaceY;
console.log(y);
y = y < 0 ? 0 : y;//最小值
y = y > scroll.offsetHeight - bar.offsetHeight ? scroll.offsetHeight - bar.offsetHeight : y;//最大值
bar.style.top = y + "px";
//设置鼠标移动的时候,文字不被选中
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
//滚动条的移动距离/文字内容的移动距离=滚动条的最大移动距离/文字内容的最大移动距离
var contentMoveY= y*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight - bar.offsetHeight);
content.style.marginTop=-contentMoveY+"px";
};
};
//鼠标抬起事件
document.onmouseup = function () {
document.onmouseover = null;
};