Div with scrollbar CSS
In this article, I will tell you how to create a div element with a scrollbar in CSS.
What is a scroll bar?
The scrollbar always appears on the right side. If the content exceeds the element space, the content will not be fully recognized, so if we create a scrollbar, users will scroll using the scrollbar to view the entire content. For example, A scrollbar is created by default for writing content in Notepad. But if we set a fixed height, width, and overflow:hidden in HTML div elements and add a lot of content inside it, we don’t know all the content, we need to create a scrollbar in HTML.
How to create scrollbar
We can use the overflow property in CSS to control text overflow.
<html>
<head>
</head>
<body>
<style type="text/css">
.scroll{
width: 110px;
height: 110px;
overflow: scroll;
float: left; }
.auto{
width: 110px;
height: 110px;
overflow:auto;
float: left;
padding-left: 20px;}
.hidden{
width: 110px;
height: 110px;
overflow:hidden;
float: left;
padding-left: 20px; }
</style>
<div class="scroll">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore manga
aliqua consequat.
</div>
<div class="auto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua consequat.
</div>
<div class="hidden">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua consequat.
</div>
</body>
</html>Output:
In the above code, we have a three div element within some content one div has the classname “scroll“, another div has the classname “auto” and another div has the classname “hidden”
Three div have fixed width and height and all <div> have overflow properties with different values scroll, auto, and hidden. See, the above output the first div has a vertical and horizontal scrollbar, the second div has only a vertical scroll and the third div has no scroll because the value of overflow is hidden.
