Ionic 6 remove scroll bar-CodePudding

I tried and search every where but all the tricks that were used to remove the scrollbar in previous versions of ionic are not working with version 6. Has anyone achieved to do this with current version ?

CodePudding user response：

I don't think it's a good ideia to completely remove the scrollbar for the desktop version of your app. Some people still prefer to use the scrollbar instead of just using the mouse wheel.

But Anyway, on mobile it is hidden automattically so you don't need to(or shouldn't) worry about it. On desktop what I do is custumize the scrollbar so it doesn't look so weird with the rest of the content of the page, but you can also hide it:

On global.scss

@media only screen and(min-width: 1000px) { // or whatever breakpoint you want to use
  *::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.4);
  }

  *::-webkit-scrollbar {
    width: 0.5rem; // set the width to 0 and remove the rest to completely hide the scrollbar
  }

  *::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4);
  }

  *::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
  }
}

CodePudding user response：

body {
  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}