EN
CSS - disable scroll bar
4
points
In this short article, we would like to show how to disable a scrollbar using pure CSS.
Quick solution:
.my-element {
overflow: hidden; /* disables scrollbar */
}
Note: go to this article to see the pure JavaScript version.
Practical example
This section shows how to disable both scrollbars using overflow: hidden;.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.my-element {
border: 1px solid red;
height: 100px;
overflow: hidden; /* <------- required to disable scrollbar */
}
</style>
</head>
<body>
<div class="my-element">
Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br />
Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br />
Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br />
Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br />
Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br />
Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br /> Sime text...<br />
</div>
</script>
</body>
</html>