HTML结构:
<div class="box">
<div id="content">
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。床前明月光,疑是地上霜。举头望明月,低头思故乡。
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头床前明月光,疑是地上霜。举头望明月,低头思故乡。
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。
床前明月光,疑是地上霜。举头望明月,低头思故乡。 床前明月光,疑是地上霜。举头望明月,低头思故乡。床前明月光,疑是地上霜。举头望明月,低头思故乡。
</div>
<div id="scroll_box">
<div id="scroll"></div>
</div>
</div>
CSS样式:
.box {
width: 300px;
height: 500px;
position: relative;
overflow: hidden;
top: 100px;
left: 100px;
border: 2px solid #abcdef;
}
#content {
padding: 5px, 18px, 5px, 5px;
position: absolute;
top: 0;
left: 0;
}
#scroll_box {
position: absolute;
right: 0;
background-color: #eee;
height: 100%;
width: 18px;
}
#scroll {
position: absolute;
/* height: 20px; */
width: 18px;
background: #abcdef;
border-radius: 18px;
}
JS逻辑:
<script>
//整个滑条盒子
var box = document.getElementsByClassName("box")[0];
//装文字内容的盒子
var content = document.getElementById("content");
//装滑条的盒子
var scroll_box = document.getElementById("scroll_box");
//滑条块
var scroll = document.getElementById("scroll");
//获取滑条块高度
//整个滑条盒子高/文字内容高 = 滑条块高/装滑条的盒子的高度
//滑条块高=整个滑条盒子高*装滑条的盒子的高度/文字内容高
var scrollHeight = box.offsetHeight * scroll_box.offsetHeight / content.scrollHeight;
scroll.style.height = scrollHeight + "px";
//给滑动添加鼠标移动事件
scroll.onmousedown = function (e) {
//scroll.offsetTop获取scroll元素上偏移量。当前scroll元素用了定位(不管绝对还是相对),上偏移的参照物为其父元素(scroll_box)元素,即自己距离父元素的上偏移量
//e.clientY以屏幕为参照物,鼠标光标在屏幕里距离上边框的距离
var spaceY = e.clientY - scroll.offsetTop;
scroll.onmousemove = function (e) {
var y = e.clientY - spaceY;
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
//给y设置最小值
y = y < 0 ? 0 : y;
//给y设置最大值
y = y > scroll_box.offsetHeight - scroll.offsetHeight ? scroll_box.offsetHeight - scroll.offsetHeight : y;
scroll.style.top = y + "px";
//求内容滑动的上偏移量
// 内容上偏移量/内容最大上偏移量=滑条上偏移量/滑条最大上偏移量
//内容上偏移量/(scroll.scrollHeight - box.offsetHeight) = y/(scroll_box.offsetHeight - scrollHeight)
var contentTop = (scroll.scrollHeight - box.offsetHeight) * y / (scroll_box.offsetHeight - scrollHeight);
content.style.top = contentTop + "px";
}
}
document.onmouseup = function () {
scroll.onmousemove = null
}
</script>
获取y的逻辑图:
滑条最大上偏移量和内容最大上偏移量的逻辑图: