Home > Article > Web Front-end > How to customize scroll bars in js (code attached)
How to customize scroll bars in js (code attached)
- 不言Original
- 2018-08-28 16:58:031605browse
The content of this article is about how to customize scroll bars in js (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Mouse wheel event
FireFox: DOMMouseScroll
e.detail Scroll down to 3 Scroll up to -3
Non-FireFox: onmousewheel
e.wheelDelta Scroll down -120 Scroll up 120
Custom scroll bar source code
<!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>Related recommendations:
JS implemented page Custom scroll bar effect_javascript skills
Code case sharing of native js encapsulation of custom scroll bar
The above is the detailed content of How to customize scroll bars in js (code attached). For more information, please follow other related articles on the PHP Chinese website!