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?

Answer 1

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/

Answer 2

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

Answer 3

应该是oveyflow-x: hidden not overflow-x: auto