CODEWITHSUNDEEP
htmlcss
User1979
User1979

Reputation: 857

How to hide horizontal scrollbar but still able to scroll

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?

Upvotes: 4

Views: 15888

Answers (3)

Fillz Adebayo
Fillz Adebayo

Reputation: 670

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

Upvotes: 1

undefined
undefined

Reputation: 1100

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/

Upvotes: 7

Oke Tega
Oke Tega

Reputation: 883

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

Upvotes: -5

Related Questions