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:-
Here we have two divisions:
- The ParentDiv which has fixed height and width as per our requirements. And its display property is set to Hidden.
- 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.