How to hide scrollbar in a div [duplicate]

Question

I have made a div which wraps the overflow content scrollable but I want it's scroll to be hidden but div remains scroll-able.

.description
{
    height: 150px;
    overflow: scroll;
}

<div class="description">
    <h4>Description</h4>
    <p>After a series of deadly discoveries, Bruce Wayne has learned that the Court of Owls is real � and a deadly threat out to control Gotham City! Unleashing their deadly assassins known as the Talons, Batman must stop the insidious Court of Owls before they claim the city for their own. In doing so, The Dark Knight will uncover dark secrets � not just about the city he�s sworn to protect, but about the history of the Wayne family.After a series of deadly discoveries, Bruce Wayne has learned that the Court of Owls is real � and a deadly threat out to control Gotham City! Unleashing their deadly assassins known as the Talons, Batman must stop the insidious Court of Owls before they claim the city for their own. In doing so, The Dark Knight will uncover dark secrets � not just about the city he�s sworn to protect, but about the history of the Wayne family.After a series of deadly discoveries, Bruce Wayne has learned that the Court of Owls is real � and a deadly threat out to control Gotham City! Unleashing their deadly assassins known as the Talons, Batman must stop the insidious Court of Owls before they claim the city for their own. In doing so, The Dark Knight will uncover dark secrets � not just about the city he�s sworn to protect, but about the history of the Wayne family.</p>
</div>

You could do it like this jsfiddle.net/Lg0wyt9u/1438, i tested it on mozilla — Nenad Vracar
– Nenad Vracar, Commented Jan 14, 2017 at 14:16

Dipto Paul Dip · Accepted Answer · 2021-07-08 10:56:25Z

16

You can make your scroll bar hidden by applying 3 lines of CSS that will work in all different browsers. Try below CSS. [UPDATE]

CSS :

.classname {
  height: 150px;
  overflow: scroll;
  -ms-overflow-style: none;
  /* for Internet Explorer, Edge */
  scrollbar-width: none;
  /* for Firefox */
}

.classname::-webkit-scrollbar {
  display: none;
  /* for Chrome, Safari, and Opera */
}

JSFiddle : https://jsfiddle.net/xet3r59k/3/

edited Jul 8, 2021 at 10:56

Dipto Paul Dip

416 bronze badges

answered Jan 14, 2017 at 14:10

Nikhil Maheshwari

2,24821 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yash Jain Over a year ago

can you tell me that the same will work fine in other browsers like MOZILLA or IE?

user2297037 Over a year ago

Have you tried this?

Digggid Over a year ago

this will not work on any other browser except for chrome

Collectives™ on Stack Overflow

How to hide scrollbar in a div [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related