Comment désactiver la barre de scroll horizontale ou verticale en CSS ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-01-06 16:47:00

Question

Comment faire pour désactiver la barre de scroll, horizontale ou verticale, en CSS ?

Réponse

Pour désactiver la barre de scroll, horizontale ou verticale, en CSS, procédez comme suit :

Utilisez la propriété CSS overflow-x pour désactiver le scroll horizontal.
Utilisez la propriété CSS overflow-y pour désactiver le scroll vertical.
Ajoutez le paramètre CSS hidden pour cacher la barre de défilement.

Exemple de code CSS pour désactiver la barre de scroll horizontale :

<style>
body {
   overflow-x: hidden; 
}
</style>

Exemple de code CSS pour désactiver la barre de scroll verticale :

<style>
body {
   overflow-y: hidden; 
}
</style>

Vous trouverez d'avantage d'informations sur la propriété CSS overflow, via cette page du site de Mozilla.

Réponse

La méthode CSS ne désactive pas les barres de scroll, mais plutôt ne les affiche pas.

Voici une autre solution, via JavaScript, qui désactive bel et bien les barres de défilement du navigateur :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment Désactiver les barres de scroll HTML ?</title>
<style> 
.taille_page { 
height: 5000px;
width: 5000px;
} 
</style> 
</head>  
<body>

<div class="taille_page"> 
<button onclick="nonScroll()">Désactiver les barres de scroll</button> 
<button onclick="ouiScroll()">Activer les barres de scroll</button> 
</div> 
  
<script> 
function nonScroll()
{ 
scrollHaut = window.pageYOffset; 
scrollGauche = window.pageXOffset;
window.onscroll = function() 
{ 
window.scrollTo(scrollGauche, scrollHaut); 
}; 
} 

function ouiScroll()
{ 
window.onscroll = function() {}; 
} 
</script> 
</body>
</html>