Maison > Article > interface Web > Comment personnaliser les barres de défilement dans js (code ci-joint)
Comment personnaliser les barres de défilement dans js (code ci-joint)
- 不言original
- 2018-08-28 16:58:031642parcourir
Le contenu de cet article explique comment personnaliser les barres de défilement en js (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Événement de la molette de la souris
FireFox : DOMMouseScroll
e.detail Le défilement vers le bas est 3 Défilement vers le haut -3
Non-FireFox : onmousewheel
e.wheelDelta Faites défiler vers le bas -120 Faites défiler vers le haut 120
Code source de la barre de défilement personnalisée
<!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>Recommandations associées :
Page d'implémentation JS barre de défilement personnalisée effect_javascript compétences
Partage de cas de code de l'encapsulation js native de la barre de défilement personnalisée
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!