Search code examples
reactjsnext.jschakra-ui

How to hide scroll bar in react app with allowing scrolling?


I am trying to hide scrollbar in my react app but not being able to achieve it. I tried using ::-webkit-scrollbar with width as 0 or display as none but not able to achieve the desired result.


Solution

  • Taken from W3 Schools

    /* Hide scrollbar for Chrome, Safari and Opera */
    .example::-webkit-scrollbar {
      display: none;
    }
    
    /* Hide scrollbar for IE, Edge and Firefox */
    .example {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }