<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 400px; height: 500px; border: 1px solid red; margin-left: 400px; margin-top: 60px; position: relative; overflow: hidden; line-height: 25px; } #content { position: absolute; font-size: 16px; width: 380px; background-color: #fff; } #scroll { position: absolute; width: 20px; height: 500px; right: 0px; background-color: lightgrey; } #bar { width: 20px; /*height: 60px;*/ position: absolute; background-color: pink; border-radius: 5px; } </style> </head> <body> <div id='box'> <div id='content'> 我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱 我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱我是一个小可爱 </div> <div id='scroll'> <div id='bar'></div> </div> </div> <script> var box = document.getElementById('box'); var content = document.getElementById('content'); var scroll =document.getElementById('scroll'); var bar = document.getElementById('bar'); var barHeight = box.clientHeight / content.scrollHeight * scroll.clientHeight; console.log(box.clientHeight); console.log(content.scrollHeight); console.log(scroll.clientHeight) bar.style.height = 0 + 'px'; if (content.scrollHeight > box.clientHeight) { console.log(barHeight); bar.style.height = barHeight + 'px'; } bar.onmousedown = function(e) { var y = e.pageY - bar.offsetTop - scroll.offsetTop; document.onmousemove = function(e) { var barY = e.pageY - y - scroll.offsetTop; var maxBar = scroll.clientHeight - bar.clientHeight; var maxContent = content.scrollHeight - box.clientHeight; barY = (barY < 0) ? 0 : barY; barY = (barY > maxBar) ? maxBar : barY; bar.style.top = barY + 'px'; var contentY = barY / maxContent * maxBar; content.style.top = -contentY + 'px'; } } document.onmouseup = function(e) { document.onmousemove = null; } </script> </body> </html>
运行结果：
