js之滚动条+鼠标滚轮实现滚动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
position: relative;
width: 300px;
height: 500px;
border: 1px solid red;
margin: 20px auto;
overflow: hidden;
}
#content {
position: absolute;
top: 0;
left: 0;
padding: 5px 18px 5px 5px;
}
#scroll {
position: absolute;
top: 0;
right: 0;
width: 18px;
height: 100%;
background-color: #00ADEF;
}
#bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: red;
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<div id="content">
我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容
</div>
<div id="scroll">
<div id="bar"></div>
</div>
</div>
</body>
</html>
js代码
window.onload = function() {
var box = document.getElementById('box');
var txt = document.getElementById('content');
var scr = document.getElementById('scroll');
var bar = document.getElementById('bar');
//根据实际内容设置 滚动条的高度 = (盒子的高度 / 内容的高度) * 盒子的高度
var barLen = (box.clientHeight / txt.clientHeight) * box.clientHeight;
bar.style.height = barLen + 'px';
var y = null;
//当鼠标按下
bar.onmousedown = function(e) {
var ev = window.event || e;
//计算鼠标位置 差
var a = ev.clientY - this.offsetTop;
//拖动滚动条
document.onmousemove = function(e) {
var ev = window.event || e;
//获取鼠标位置
y = ev.clientY - a;
roll();
}
return false; //阻止默认行为
}
//滚动
function roll() {
//限制区域
if (y <= 0) {
y = 0;
} else if (y >= scr.clientHeight - bar.clientHeight) {
y = scr.clientHeight - bar.clientHeight;
}
//设置 滚动条
bar.style.top = y + 'px';
// 滚动条 / 盒子的长度 = 盒子的长度 / 内容的长度
//设置 内容滚动 = (内容的长度 - 盒子显示内容的长度）/ (盒子显示内容长度 - 滚动条的长度) * 滚动条走的距离
var txtLen = (txt.offsetHeight - box.clientHeight) / (box.clientHeight - bar.offsetHeight) * y;
txt.style.top = -txtLen + 'px';
//return false; //阻止默认行为
}
//鼠标悬停box 滚动
box.onmousewheel = function(e) {
var ev = window.event || e;
//监听滚轮 方向
if (ev.wheelDelta > 0) {
//上
y -= 16;
roll();
} else {
//下
y += 16;
roll();
}
}
//松开鼠标时
document.onmouseup = function() {
document.onmousemove = null;
}
}
本文来自博客园，作者：JackieDYH，转载请注明原文链接：https://www.cnblogs.com/JackieDYH/p/17634762.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南