• Post category:CSS

How to Create Div with scrollbar in CSS for

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:div with scrollbar css

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.

Leave a Reply