标签：原生 bar 个位数 clientHeight js 滚动条 var 跳过
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 300px;
height: 400px;
margin: 50px auto;
border: 1px solid #f00;
position: relative;
overflow: hidden;
/*不让文字被选中*/
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#content {
width: 280px;
position: absolute;
left: 0;
top: 0;
}
#scroll {
width: 20px;
height: 100%;
background-color: #ccc;
position: absolute;
right: 0;
top: 0;
}
#bar {
width: 100%;
height: 100px;
background-color: #f00;
border-radius: 10px;
cursor: pointer;
position: absolute;
left: 0;
top: 0;
}
</style>
<script src="js/common.js"></script>
</head>
<body>
<!-- 直接使用浏览器自带的滚动条样式比较丑，调整样式有兼容性问题，此处用div样式模拟滚动条 -->
<div id="box">
<div id="content">
跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数，跳过个位数为3的数
</div>
<div id="scroll">
<div id="bar"></div>
</div>
</div>
<script>
var box = my$('box');
var content = my$('content');
var scroll = my$('scroll');
var bar = my$('bar');
// 内容的高度与滚动条的高度成反比
// 滚动条的高度 / scroll的高度 = box的高度 / content的高度
// offset 大小 = 元素大小 + padding + border
// client 大小 = 元素大小 + padding
// scroll 大小 = 内容大小 + padding
var barHeight = 0;
if (box.clientHeight < content.scrollHeight) { // 盒子高度小于内容高度时才出现滚动条
barHeight = box.clientHeight * scroll.clientHeight / content.scrollHeight;
}
bar.style.height = barHeight + 'px';
// 拖拽滚动条
bar.onmousedown = function (e) {
e = e || window.event;
// 按下鼠标时，求鼠标在bar中的位置
var y = getPage(e).pageY - box.offsetTop - bar.offsetTop;
document.onmousemove = function (e) { // 鼠标在整个文档上移动
e = e || window.event;
// 鼠标在页面上移动的时候，求bar的位置
var barY = getPage(e).pageY - box.offsetTop - y;
// 限制滚动条位置
barY = barY < 0 ? 0 : barY;
barY = barY > (scroll.clientHeight - bar.clientHeight) ? (scroll.clientHeight - bar.clientHeight) : barY;
bar.style.top = barY + 'px';
// 内容移动
// 滚动出去内容的距离 / 内容最大滚动出去的距离 = 滚动条的距离 / 最大滚动条的距离
// 内容最大滚动出去的距离
var contentMax = content.clientHeight - box.clientHeight;
// 最大滚动条的距离
var barMax = scroll.clientHeight - bar.clientHeight;
var contentY = contentMax * barY / barMax;
content.style.top = -contentY + 'px';
}
}
document.onmouseup = function () { // 鼠标弹起后在整个文档上不移动
document.onmousemove = null;
}
</script>
</body>
</html>
标签：原生,bar,个位数,clientHeight,js,滚动条,var,跳过 来源： https://blog.csdn.net/u010234868/article/details/120379722
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。