Pourquoi le overflow-x:hidden de HTML affecte-t-il le script du bouton de retour en haut ?
<p>La partie <em>disparaître en haut</em> du script du bouton de retour en haut ne fonctionne pas en raison de <code>html { overflow-x: Hidden; </p>
<pre class="brush:php;toolbar:false;"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Contient jQuery -->
<button onclick="topFunction()" class="buton" id="myBtn" title="Retour en haut"><i class="fa-solid fa-angle-up"></i> ;
<script>
let monbouton = document.getElementById("myBtn");
window.onscroll = function() {scrollFunction()};
fonction scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
monbouton.style.display = "bloquer" ;
} autre {
monbouton.style.display = "aucun" ;
}
}
fonction topFunction() {
document.body.scrollTop = 0; // pour Safari
document.documentElement.scrollTop = 0; // S'applique à Chrome, Firefox, IE et Opera
}
</script>
</bouton>
CSS
HTML,
corps {
hauteur : 100 % ;
comportement de défilement : fluide ;
position : relative ;
overflow-x : caché ;
}
corps {
couleur d'arrière-plan : #060606 ;
famille de polices : « Montserrat », sans empattement ;
couleur : #ffffff ;
marge : 0 ;
remplissage : 0 ;
}
.bouton {
overflow-x : visible !important ;
}
#monBtn {
affichage : aucun ;
poste : fixe ;
en bas : 20 px ;
à droite : 30 px ;
indice z : 99 ;
bordure : aucune ;
contour : aucun ;
couleur de fond : rouge ;
Couleur blanche;
curseur : pointeur ;
remplissage : 15 px ;
rayon de bordure : 10 px ;
taille de police : 18 px ;
}
#myBtn:survolez {
couleur d'arrière-plan : #333 ;
}</pré>
<p>La plupart sont du code, veuillez ajouter plus de détails, la plupart sont du code, veuillez ajouter plus de détails, la plupart sont du code, veuillez ajouter plus de détails, la plupart sont du code, veuillez ajouter plus de détails, la plupart des c'est du code, veuillez ajouter plus de détails, c'est principalement du code, veuillez ajouter plus de détails, c'est principalement du code, veuillez ajouter plus de détails, c'est principalement du code, veuillez ajouter plus de détails, c'est principalement du code, veuillez ajouter plus de détails Plus de détails</p>
<p>Si je supprime le overflow-x dans le code HTML, les boutons disparaîtront en haut, mais il y aura un espace blanc à droite de tout le contenu du site</p>
