Hide horizontal scroll bar but be able to scroll

Asked Feb 16 '18 at 12:53

Active Feb 16 '18 at 13:04

Viewed 1,095 times

div.scrollmenu {
  background-color: #0090ff;
  overflow: auto;
  width: 100%;
  white-space: nowrap;
}

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}

<div class="scrollmenu invisible-scrollbar">
  <a href="#home">Home</a>
  <a href="news">Fashion</a>
  <a href="people">People</a>
  <a href="work">Work</a>
</div>

This hides the horizontal bar in Chrome and Explorer but did not on Firefox, please help.

edited Feb 16 '18 at 12:55

Brett DeWoody

59,771
29
135
184

asked Feb 16 '18 at 12:53

Muayyat Billah

Did you try `overflow-x: hidden` – SpiderCode Feb 16 '18 at 13:01
https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll/16671476 – JoeP Feb 16 '18 at 13:16
Yes i tried that, it hides the bar. But what i want is to hide the bar and still be able to scroll. Thanks – Muayyat Billah Feb 16 '18 at 21:21

Hide horizontal scroll bar but be able to scroll

0 Answers0