4

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?

5
  • 2
    CSS ::-webkit-scrollbar: display: none
    – undefined
    Feb 20, 2017 at 15:50
  • @ZeusZdravkov thanks it works for me
    – User1979
    Feb 20, 2017 at 16:01
  • Note that that will only work in Webkit browsers and those that recoginise the -webkit- prefix.
    – Shaggy
    Feb 20, 2017 at 16:28
  • 2
    did you ever figure this out?
    – mad_fox
    Oct 4, 2017 at 3:04
  • 1
    Does this answer your question? Hide scroll bar, but while still being able to scroll
    – JohnnyHK
    Apr 15, 2020 at 20:35

3 Answers 3

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/

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

-4

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

3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.