Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to hide scrollbar in a div [duplicate]

Tags:

html

css

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>
like image 395
Ali Rasheed Avatar asked Jan 14 '17 14:01

Ali Rasheed


Video Answer


1 Answers

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/

like image 95
Nikhil Maheshwari Avatar answered Sep 28 '22 16:09

Nikhil Maheshwari