Aujourd'hui, j'aimerais partager avec vous la barre de défilement du navigateur que j'ai créée moi-même. Nous savons que l'utilisation du CSS pour personnaliser la barre de défilement est également un bon moyen. Bien que le CSS puisse modifier le style de la barre de défilement du navigateur Chrome, il le peut. également être personnalisé. Le CSS peut également être modifié. La couleur de la barre de défilement du navigateur IE. Cependant, CSS ne peut changer que la couleur d'IE, et CSS ne peut pas modifier le style et la couleur de Firefox. Cela ne peut donc être réalisé que via JavaScript. Il existe également des plugins qui permettent de le faire. Permettez-moi de partager mes propres idées de mise en œuvre en utilisant JavaScript natif. Jetons un coup d'œil à l'effet dans la dernière image :
L'idée de l'implémentation de JavaScript est de simuler la propre barre de défilement du navigateur. Mon idée est d'abord de placer l'intégralité du document dans un conteneur, puis de modifier la valeur supérieure du div dans le conteneur pour obtenir l'effet de défilement. La disposition est la suivante :
<style>
*{
margin:0;
padding:0;
}
body{
overflow:hidden;
}
#box{
float:right;
top:0;
right:0;
width:20px;
background:#ccc;
position:relative;
}
#drag{
position: absolute;
top:0
left:0;
width:20px;
background:green;
}
#content{
position:absolute;
left: 0;
}
</style>
<body>
<div id="box">
<div id="drag"></div>
</div>
<div id="content">
<div style="background:#ccc;width: 100px;">
Although many people talk about the super performance of quantum computing, such as one second to complete the current supercomputer computing tasks for several years, but so far did not create a true sense of the quantum computer, one of the very important reason is that, The state of particles used in quantum computation is not stable, and any electromagnetic or physical interference can easily disrupt its work. The state of the Mayola fermion is very stable, which makes it a perfect choice for making quantum computers. Six months ago in the laboratory of Shanghai Jiaotong University, Jia Jinfeng successfully captured it.
Speaking of the scene, Jia Jinfeng said: "In fact, I started to hear the Mayolana fermions, I think this thing may not be done 20 years out.
Using a special material preparation method, Jia Jinfeng's research team has grown topological insulators on the superconductors with thickness of 5 nanometers. The topological superconductor materials are prepared and finally the Mayolana fermions are found at the interface of the topological superconductors. The mysterious particles were captured 80 years, but also let Jia Jinfeng more firm with its confidence in the manufacture of quantum computers.
Speaking of the future of the plan, Jia Jinfeng said: "I hope to within a few years to do the topological quantum bit!" (Before) the world has not, so if we cut into this from the point, we are the same with the world The starting line, for our country, this is able to catch up with the footsteps of quantum computing, a starting point.
<div>
</div>
</body>Définissez d'abord le curseur. et slider, puis Lors de la définition d'une boîte contenant du contenu, la mise en page est très simple. Le débordement du corps est défini sur masqué pour masquer la barre de défilement par défaut.
L'idée principale de la mise en œuvre est la suivante : distance de déplacement du curseur/plage de défilement du curseur = distance de défilement du contenu/hauteur de défilement du contenu ; la distance de déplacement du curseur est la distance parcourue après avoir appuyé sur la souris,
La hauteur de défilement du contenu est la hauteur totale du contenu moins la hauteur de la zone visible. De plus, la hauteur totale de la barre de défilement est la hauteur de la zone visuelle. La hauteur du slider = la hauteur de la zone visuelle/la hauteur totale du contenu*la hauteur de la zone visuelle. La dernière étape consiste à déterminer si le navigateur est Firefox.
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById('box');
var oDrag=document.getElementById('drag');
var content=document.getElementById('content');
var viewHeight=document.documentElement.clientHeight;
var conHeight=content.clientHeight
oBox.style.height=viewHeight+'px';
oDrag.style.height=viewHeight/conHeight*viewHeight+'px';
window.onresize = function(){
viewHeight=document.documentElement.clientHeight;
oBox.style.height=viewHeight+'px';
oDrag.style.height=viewHeight/conHeight*viewHeight+'px';
oDrag.style.top=-content.offsetTop/(content.clientHeight-viewHeight)*(oBox.clientHeight-oDrag.clientHeight)+'px';
}
oDrag.onmousedown=function (ev){
//阻止默认事件
var e=ev||window.event;
if (e.preventDefault) {
e.preventDefault();
} else{
e.returnValue=false;
};
//e.clientY鼠标当前坐标
var downY=e.clientY-oDrag.offsetTop;
document.onmousemove=function (ev){
var e=ev||window.event;
var top=e.clientY-downY;
if (top<=0) {
top=0;
};
if (top>=oBox.clientHeight-oDrag.clientHeight) {
top=oBox.clientHeight-oDrag.clientHeight;
};
var scale=top/(oBox.clientHeight-oDrag.clientHeight);
var contentY=scale*(content.clientHeight-viewHeight);
oDrag.style.top=top+'px';
content.style.top=-contentY+'px';
}
document.onmouseup=function (){
document.onmousemove=null;
}
}
var str=window.navigator.userAgent.toLowerCase();
//火狐浏览器
if (str.indexOf('firefox')!=-1){
document.addEventListener('DOMMouseScroll',function (e){
e.preventDefault();//阻止窗口默认的滚动事件
if (e.detail<0) {
var scrollHei=content.offsetTop+25;
if (scrollHei>=0) {
scrollHei=0;
};
if (scrollHei<=-(content.clientHeight-viewHeight)) {
scrollHei=-(content.clientHeight-viewHeight);
};
var scale=scrollHei/(content.clientHeight-viewHeight);
var top=scale*(oBox.clientHeight-oDrag.clientHeight);
content.style.top=scrollHei+'px';
oDrag.style.top=-top+'px';
}
if (e.detail>0) {
var scrollHei=content.offsetTop-25;
if (scrollHei>=0) {
scrollHei=0;
};
if (scrollHei<=-(content.clientHeight-viewHeight)) {
scrollHei=-(content.clientHeight-viewHeight);
};
var scale=scrollHei/(content.clientHeight-viewHeight);
var top=scale*(oBox.clientHeight-oDrag.clientHeight);
content.style.top=scrollHei+'px';
oDrag.style.top=-top+'px';
};
},false);
}
else{//非火狐浏览器
document.onmousewheel=function (ev){
var e=ev||window.event;
if (e.preventDefault) {
e.preventDefault();
} else{
e.returnValue=false;
};
if (e.wheelDelta>0) {
var scrollHei=content.offsetTop+25;
if (scrollHei>=0) {
scrollHei=0;
};
if (scrollHei<=-(content.clientHeight-viewHeight)) {
scrollHei=-(content.clientHeight-viewHeight);
};
var scale=scrollHei/(content.clientHeight-viewHeight);
var top=scale*(oBox.clientHeight-oDrag.clientHeight);
content.style.top=scrollHei+'px';
oDrag.style.top=-top+'px';
};
if (e.wheelDelta<0) {
var scrollHei=content.offsetTop-25;
if (scrollHei>=0) {
scrollHei=0;
};
if (scrollHei<=-(content.clientHeight-viewHeight)) {
scrollHei=-(content.clientHeight-viewHeight);
};
var scale=scrollHei/(content.clientHeight-viewHeight);
var top=scale*(oBox.clientHeight-oDrag.clientHeight);
content.style.top=scrollHei+'px';
oDrag.style.top=-top+'px';
};
}
}
}
</script>Ce qui précède est l'ensemble du processus de ma propre implémentation. Il contient également de nombreux bugs, tels que le problème du zoom du navigateur. Merci d'avoir lu. Si vous avez des corrections, n'hésitez pas à les corriger
Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter une certaine aide aux études ou au travail de chacun. . J'espère également votre soutien.
Pour plus de barres de défilement de navigateur personnalisées JavaScript compatibles avec IE, Firefox et Chrome, veuillez faire attention au site Web PHP chinois !
LTE
Quelle est la raison de l'échec de la connexion au serveur ?
Quelles sont les méthodes de production de production d'animation html5 ?
Quelles sont les vulnérabilités courantes de Tomcat ?
Comment supprimer la dernière page vierge dans Word
Comment modifier par lots les noms de fichiers
Comment effacer le flotteur en CSS
conversion de fichier flac
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
