Different ways to make div scrollable horizontally and vertically
Last Updated on Dec 5, 2022 - Written By Torikul Islam
You can handle content from being unexpected overflown by using the following methods.
While you make div scrollable, it will make your website good-looking and responsive for devices.
Different ways to make a DIV scrollable
1: Show a scrollbar both horizontally and vertically
If you want to show a scrollbar both horizontally and vertically, then you can do it by controlling overflow. Make sure your width and height are exactly defined.
CSS:
.scroll {
overflow: scroll;
height:100px;
width:400px;
padding-left:10px;
padding-right:10px;
border:1px solid gray;
}
HTML:
<div class="scroll">Content</div>
Result:
2: Make div horizontally scrollable
CSS:
.scroll {
overflow-x: scroll;
white-space: nowrap;
height:100px;
width:400px;
padding-left:10px;
padding-right:10px;
border:1px solid gray;
}
Result:
3: Make div vertically scrollable
CSS:
.scroll {
overflow-y: scroll;
height:100px;
width:400px;
padding-left:10px;
padding-right:10px;
border:1px solid gray;
}
Result:
4: Make div scrollable when only necessary.
If you only want a scrollbar to appear when the box size limit is filled, just use overflow: auto
. If you use use overflow-x: auto
, the scroll will be visible after crossing the width limit. Same thing you can apply to height and set overflow-y: auto.
CSS:
.scroll {
overflow: auto;
height:100px;
width:400px;
padding-left:10px;
padding-right:10px;
border:1px solid gray;
}
Result:
Sometimes scrollbar seems disgusting. So you can hide the scrollbar, while content will remain scrollable. To do this you should use the following codes with the above ones.
5: Make div scrollable without showing the scrollbar
.scroll::-webkit-scrollbar {
display: none;
}
Or
You can remove scrollbar space by setting width 0. Same method you can use to make the scrollbar thicker.
.scroll::-webkit-scrollbar {
width:0;
}
Result:
Make div scrollable - Important rules:
The scrollbar properties are overflow, overflow-x, overflow-y, and values of those properties are visible, hidden, scroll, auto, initial, and inherit. You can set any of those values for any property. Let me explain this.
Properties:
overflow:
The overflow property specifies both the horizontal and vertical area of the element- if the content overflows the element's content area.
overflow-x:
The overflow-x property specifies the horizontal area of the element- if the content overflows the element's content area.
overflow-y:
The overflow-y property specifies the vertical area of the element- if the content overflows the element's content area.
Values:
Visible:
Visible is the default value. The overflowed content also will be visible.
Hidden:
If the content length exceeds the container element's size, the extensive portion will be hidden. The hidden part won't be shown to the user.
Scroll:
This value makes the content scrollable, so the user will be able to see overflowed content by scrolling.
Auto:
It will show the scrollbar when needed.
Initial:
This value sets this property to its default value.
Inherit:
Inherits this property from its parent element which is predefined.
Hopefully, now you are able to make div scrollable in any way.