How to hide horizontal scrollbar but still able to scroll

Question

I have a div with 3 div where every div scroll independently.

<div class="divWrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.item {
  position: relative;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  overflow-x: auto;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 16px;
  font-size: 0;
}

While scrolling i want to hide the scroll bar. on Windows all browser don't show scrollbar but on MAC scrollbar is visible. Is there a way to get scrolling without having the scrollbar visible?

Note that that will only work in Webkit browsers and those that recoginise the `-webkit-` prefix. — Shaggy, Feb 20 '17 at 16:28
Does this answer your question? [Hide scroll bar, but while still being able to scroll](https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll) — JohnnyHK, Apr 15 '20 at 20:35

score 7 · Answer 1 · answered Feb 20 '17 at 17:09

7

Custom scrollbar in Webkit browsers

So the CSS is

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

More at this topic: https://css-tricks.com/custom-scrollbars-in-webkit/

answered Feb 20 '17 at 17:09

undefined

1,019
12
24

score 1 · Answer 2 · answered Mar 16 '21 at 21:40

use CSS code below

.row-cards  {
    display: flex;   
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    
   

  }

This div class name is .row-cards for this the horizontal scroll bar functions would be active but the scroll bar would be hidden allowing for a smooth look and feel

score -5 · Answer 3 · answered Feb 20 '17 at 15:46

-5

It should be oveyflow-x: hidden not overflow-x: auto

answered Feb 20 '17 at 15:46

Oke Tega

850
10
21

That way you won't be able to scroll horizontally. – Luuuud Feb 20 '17 at 16:31
check this http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll?rq=1 – Oke Tega Feb 20 '17 at 16:33
@OkeTega that is for vertical scroll. – Radmation Aug 08 '17 at 00:26

How to hide horizontal scrollbar but still able to scroll

3 Answers3

Custom scrollbar in Webkit browsers