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
– Shaggy, Commented Feb 20, 2017 at 16:28
Does this answer your question? Hide scroll bar, but while still being able to scroll — JohnnyHK
– JohnnyHK, Commented Apr 15, 2020 at 20:35

undefined · Accepted Answer · 2017-02-20 17:09:47Z

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, 2017 at 17:09

undefined

1,1401 gold badge15 silver badges26 bronze badges

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

Comments

Fillz Adebayo · Accepted Answer · 2021-03-16 21:40:50Z

1

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

answered Mar 16, 2021 at 21:40

Fillz Adebayo

6805 silver badges6 bronze badges

Comments

Oke Tega · Accepted Answer · 2017-02-20 15:46:22Z

-5

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

answered Feb 20, 2017 at 15:46

Oke Tega

88311 silver badges22 bronze badges

3 Comments

Luuuud Over a year ago

That way you won't be able to scroll horizontally.

Oke Tega Over a year ago

check this stackoverflow.com/questions/16670931/…

Radmation Over a year ago

@OkeTega that is for vertical scroll.

Collectives™ on Stack Overflow

How to hide horizontal scrollbar but still able to scroll

3 Answers 3

Custom scrollbar in Webkit browsers

Comments

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Custom scrollbar in Webkit browsers

Comments

Comments

3 Comments

Linked

Related