js中如何自定义滚动条（附代码）
程序员文章站
2022-05-20 17:19:51
...
本篇文章给大家带来的内容是关于js中如何自定义滚动条（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
鼠标滚轮事件
FireFox : DOMMouseScroll
e.detail 向下滚动为 3 向上滚动 -3
非FireFox : onmousewheel
e.wheelDelta 向下滚动-120 向上滚动120
自定滚动条源码
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#box {
width: 100%;
height: 100%;
overflow: hidden;
}
.ball {
width: 100%;
height: 500px;
}
#scroll {
width: 6px;
height: 96%;
position: fixed;
top: 2%;
right: 5px;
border-radius: 3px;
background-color: rgba(235, 233, 233, 0.5);
z-index: 9998;
opacity: 1;
}
#scrollBar {
position: absolute;
z-index: 9999;
width: 6px;
height: 20px;
border-radius: 3px;
left: 0;
top: 0;
background-color: #383838;
}
</style>
</head>
<body style="overflow:hidden;">
<div id="box">
<div id="content">
<p class="ball" style="background-color:lightpink;"></p>
<p class="ball" style="background-color:blue;"></p>
<p class="ball" style="background-color:yellow;"></p>
<p class="ball" style="background-color:lightpink;"></p>
<p class="ball" style="background-color:blue;"></p>
<p class="ball" style="background-color:yellow;"></p>
</div>
</div>
<div id="scroll">
<div id="scrollBar"></div>
</div></body></html><script type="text/javascript">
var content = document.getElementById("content");
var box = document.getElementById("box");
var scroll = document.getElementById("scroll");
var scrollBar = document.getElementById("scrollBar");
var data = 30;
// 浏览器的可视高度减/页面的总高度*滚动栏的总高度=滚动按钮的高度
var _eight;
window.onresize = function (){
init();
}
function init (){
_height = window.innerHeight * scroll.offsetHeight / content.offsetHeight;
scrollBar.style.height = _height + "px";
}
init(); //火狐
box.addEventListener("DOMMouseScroll", function (e) {
var e = e || event; if (e.detail > 0) {//向下滚动
box.scrollTop += data;
} else {//向上滚动
box.scrollTop -= data;
}
//浏览器的滚动距离/(页面的总高度-浏览器的可视高度)* (滚动栏的总高度-滚动按钮的高度)= 滚动的距离
var _top = box.scrollTop * (scroll.offsetHeight - scrollBar.offsetHeight) / (content.offsetHeight - window.innerHeight);
scrollBar.style.top = _top + "px";
}); //非火狐
box.addEventListener("mousewheel", function (e) {
var e = e || event;
if (e.wheelDelta > 0) {//向上滚动
box.scrollTop -= data;
} else {//向下滚动
box.scrollTop += data;
}
//浏览器的滚动距离/(页面的总高度-浏览器的可视高度)* (滚动栏的总高度-滚动按钮的高度)= 滚动的距离
var _top = box.scrollTop * (scroll.offsetHeight - scrollBar.offsetHeight) / (content.offsetHeight - window.innerHeight);
scrollBar.style.top = _top + "px";
});
</script>
相关推荐：
以上就是js中如何自定义滚动条（附代码）的详细内容，更多请关注其它相关文章！