<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 250px;
height: 300px;
border: 1px solid blue;
margin: 100px;
overflow: hidden;
position: relative;
}
.content {
padding: 5px 18px 5px 5px;
position: absolute;
top: 0;
left: 0;
}
.scroll {
width: 15px;
height: 100%;
background-color: #eee;
right: 0;
position: absolute;
}
.bar {
width: 100%;
height: 60px;
background-color: blue;
border-radius: 10px;
cursor: pointer;
position: absolute;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="content" id="content">
有外媒報道稱吳亦凡新專輯銷量是通過欺詐手段取得， 将不會計入榜單排名，這就意味着吳亦凡的榜單排名無效。還有網友發現，美國一則新聞發表了一篇标題為：“吳亦凡(Kris Wu)在美國的iTunes銷售額“以欺詐手段”獲得，不會計入排行榜"的報道。 而在這之前，Billboard官方也在社交網上回應：“Kris Wu iTunes-topping sales are under review（Kris Wu的iTunes頂級銷售正在審查中）” 有外媒報道稱吳亦凡新專輯銷量是通過欺詐手段取得， 将不會計入榜單排名，這就意味着吳亦凡的榜單排名無效。還有網友發現，美國一則新聞發表了一篇标題為：“吳亦凡(Kris
Wu)在美國的iTunes銷售額“以欺詐手段”獲得，不會計入排行榜"的報道。 而在這之前，Billboard官方也在社交網上回應：“Kris Wu iTunes-topping sales are under review（Kris Wu的iTunes頂級銷售正在審查中）” Wu)在美國的iTunes銷售額“以欺詐手段”獲得，不會計入排行榜"的報道。 而在這之前，Billboard官方也在社交網上回應：“Kris Wu iTunes-topping sales are under
review（Kris Wu的iTunes頂級銷售正在審查中）” Wu)在美國的iTunes銷售額“以欺詐手段”獲得，不會計入排行榜"的報道。 而在這之前，Billboard官方也在社交網上回應：“Kris Wu iTunes-topping sales are under review（Kris Wu的iTunes頂級銷售正在審查中）” Wu)在美國的iTunes銷售額“以欺詐手段”獲得，不會計入排行榜"的報道。 而在這之前，Billboard官方也在社交網上回應：“Kris
Wu iTunes-topping sales are under review（Kris Wu的iTunes頂級銷售正在審查中）”
</div>
<div class="scroll" id="scroll">
<div class="bar" id="bar"></div>
</div>
</div>
<script>
//1.根據内容的大小，計算滾動條的高度
function my$(id) {
return document.getElementById(id);
}
// 擷取頁面滾動距離的浏覽器相容性問題
// 擷取頁面滾動出去的距離
function getScroll() {
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
return {
scrollLeft: scrollLeft,
scrollTop: scrollTop
}
}
// 擷取滑鼠在頁面的位置，處理浏覽器相容性
function getPage(e) {
var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
var pageY = e.pageY || e.clientY + getScroll().scrollTop;
return {
pageX: pageX,
pageY: pageY
}
}
var box = my$('box');
var content = my$('content');
var scroll = my$('scroll');
var bar = my$('bar');
//滾動條的高度/scroll的高度(scroll.clientHeight)=box的高度(box.clientHeight)/内容的高度(content.scrollHeight)
//當内容高度<box高度時，沒有滾動條顯示
var barHeight = 0;
if (content.scrollHeight > box.clientHeight) {
barHeight = box.clientHeight / content.scrollHeight * scroll.clientHeight;
}
bar.style.height = barHeight + "px";
//2.讓滾動條能夠拖拽
//2.1 當滑鼠按下的時候，求滑鼠在滾動條中的位置
bar.onmousedown = function(e) {
e = e || window.event;
//滑鼠在滾動條中的位置
var y = getPage(e).pageY - box.offsetTop - bar.offsetTop;
//2.2滑鼠在頁面上移動的時候，滾動條的位置
document.onmousemove = function(e) {
var barY = getPage(e).pageY - y - box.offsetTop;
// 控制bar不能移除scroll
barY = barY < 0 ? 0 : barY;
barY = barY > scroll.clientHeight - bar.clientHeight ? scroll.clientHeight - bar.clientHeight : barY;
bar.style.top = barY + 'px';
//3.當拖拽時，内容跟着滾動
//内容滾動的距離/内容最大能夠滾動的距離=滾動條滾動的距離/滾動條最大能滾動的距離
//内容最大滾動距離
var contentMax = content.scrollHeight - box.clientHeight;
//滾動條最大滾動距離
var barMax = scroll.clientHeight - bar.clientHeight;
var contentY = barY / barMax * contentMax;
content.style.top = -contentY + "px";
}
}
document.onmouseup = function() {
//移除滑鼠移動事件
document.onmousemove = null;
}
</script>
</body>
</html>
JS模拟滾動條功能實作 
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)