facebook icon twitter icon angle down linkedin icon youtube icon
Home > Blog > make-div-scrollable

Different ways to make div scrollable horizontally and vertically

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:

Show a scrollbar both horizontally and vertically

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:

Make div horizontally scrollable

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:

Make div vertically scrollable

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:

Make div scrollable when only necessary

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 without showing scrollbar

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. 

Tarikul islam

About Torikul islam

Torikul islam is a professional web developer and affiliate marketer. Join Torikul to learn how to start a website and operate it well. He started his Web Developement career from Bangladesh Association of Software and Information (BASIS) in 2015. Later he continiued his journey to expanding knowledge and sharing it with others.

Write a Comment

No comment yet