div défilable en JavaScript
-
Utiliser la propriété
overflowpour faire défiler un élémentdiven JavaScript -
Utiliser les propriétés
overflowXetoverflowYpour faire défiler un élémentdiven JavaScript
En JavaScript, nous pouvons manipuler certains événements qui améliorent l’interface. Souvent, les performances de certaines propriétés CSS peuvent être expliquées par l’implémentation de JavaScript.
Tout comme le overflow-x en CSS peut faire la même tâche en JavaScript que overflowX.
Notre tâche est de rendre un élément div défilable. Nous ne nous focaliserons pas sur le offsetHeight/Width ou la hauteur de base largeur du contenu ; nous définirons plutôt une div avec une taille statique.
Mais le contenu peut être de longueur variable. Nous allons voir deux exemples qui couvriront l’utilisation de overflow et overflowX and overflowY.
Vérifions les codes.
Utiliser la propriété overflow pour faire défiler un élément div en JavaScript
La propriété overflow pour la valeur auto créera automatiquement une barre de défilement verticale si le contenu est plus grand que la taille div. Cette seule propriété résoudra le cas de la création d’un élément div défilable.
Dans les lignes de code suivantes, une démo est présentée.
Extrait de code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
<style>
div{
background: powderblue;
}
#scroll{
height:100px;
width: 200px;
}
</style>
</head>
<body>
<div id="scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis reprehenderit earum, rem tenetur quaerat, ab, nostrum ducimus totam quis natus placeat eos vitae? Sint eos, ab eum repellendus ex praesentium.</p>
</div>
<script>
document.getElementById('scroll').style.overflow = 'auto';
</script>
</body>
</html>
Production:
Utiliser les propriétés overflowX et overflowY pour faire défiler un élément div en JavaScript
Nous définissons la barre de défilement x-axis sur none en fonction de ces ensembles de propriétés. Et ainsi, la barre de défilement verticale est définie avec la valeur de overflowY sur auto.
Par conséquent, lorsque le contenu prend une taille supérieure à la div, la barre de défilement apparaît et fonctionne. La clôture de code donne un meilleur aperçu.
Extrait de code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div{
background: lavender;
}
#scroll{
height:100px;
width: 200px;
}
</style>
</head>
<body>
<div id="scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis reprehenderit earum, rem tenetur quaerat, ab, nostrum ducimus totam quis natus placeat eos vitae? Sint eos, ab eum repellendus ex praesentium.</p>
</div>
<script>
document.getElementById('scroll').style.overflowX='none';
document.getElementById('scroll').style.overflowY='auto';
</script>
</body>
</html>
Production:
