<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 250px;
overflow-y: auto;
border: 1px solid red;
scrollbar-gutter: stable;
}
</style>
<script>
function changeStyle(checkboxElement) {
element = document.getElementById("divElement");
if (checkboxElement.checked) {
// Réserve l'espace pour la future barre de défilement
element.style.setProperty("scrollbar-gutter", "stable");
} else {
element.style.setProperty("scrollbar-gutter", "auto");
}
}
</script>
</head>
<body>
<input id="checkbox" type="checkbox" checked="true" onchange="changeStyle(this)">
<label for="checkbox">scrollbar-gutter: stable</label>
<div id="divElement" contenteditable>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa quibusdam fugit ullam odit, perferendis vero? Nam iure, maxime doloremque laboriosam, quas laborum corrupti tempora explicabo, omnis itaque saepe illum mollitia.</p>
</div>
</body>
</html>
Commentaires
Enregistrer un commentaire