How to make an element scrollable without showing scroll bar

If you are stuck in a situation where you want to allow a div to be scrollable but there should be no scroll bar visible. This might look impossible at first but there is a simple trick that allows you to make this possible. Consider the following diagram:-

How to make an element scrollable without showing scroll bar

 

Explanation:-

Here we have two divisions:

  1. The ParentDiv which has fixed height and width as per our requirements. And its display property is set to Hidden.
  2. And the ChildDiv which contains the content we want to be scrollable but with hidden scroller.

The trick is that we are going to push the scroll bar off the parent div by keeping its width more than parent div by the amount of the width of scroll bar, and since parent div has display:hidden CSS property, the scrollbars will not be visible to the user.

 

Code:-

[codegroup]
[css]
.ChildDiv{
width: 500px;
height:300px;
overflow: scroll;
}

.ParentDiv {
width: 485px;
height: 300px;
overflow: hidden;
}

[/css]
[html]

The long content goes here

[/html]
[/codegroup]

If you are stuck in a situation where you want to allow a div to be scrollable but there should be no scroll bar visible. This might look impossible at first but there is a simple trick that allows you to make this possible. Consider the following diagram:-

How to make an element scrollable without showing scroll bar

 

Explanation:-

Here we have two divisions:

  1. The ParentDiv which has fixed height and width as per our requirements. And its display property is set to Hidden.
  2. And the ChildDiv which contains the content we want to be scrollable but with hidden scroller.

The trick is that we are going to push the scroll bar off the parent div by keeping its width more than parent div by the amount of the width of scroll bar, and since parent div has display:hidden CSS property, the scrollbars will not be visible to the user.

 

Code:-

[codegroup]
[css]
.ChildDiv{
width: 500px;
height:300px;
overflow: scroll;
}

.ParentDiv {
width: 485px;
height: 300px;
overflow: hidden;
}

[/css]
[html]

The long content goes here

[/html]
[/codegroup]

Get in Touch

    Name

    Number

    Email

    Subject

    Message

    Contact Info

    (+91) 0761 4038442
    3rd Floor, Baza Plaza,
    Ukhri Chowk, Next To Global Hospital,
    Jabalpur (M.P), India 482002
    Powered by

    Privacy Preference Center