'Ionic 4 - Remove Scroll Bar

What is the best method to remove the scroll bar in Ionic 4 while still keeping the ability to scroll and using the shadow DOM?

::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
}

This above has no effect.



Solution 1:[1]

Try this it will work fine for me in ionic 4

ion-content {
--offset-bottom: auto!important;
--overflow: hidden;
overflow: auto;
&::-webkit-scrollbar {
  display: none;
}
}

Solution 2:[2]

The other solutions would disable my scrollbar. What fixed it for me was replacing my ion-contents with divs and adding this in app.scss

div {
  -ms-overflow-style: none; /* Edge, Internet Explorer */
  scrollbar-width: none; /* Firefox */
  overflow-y: scroll;
}

// hides scrollbars while allowing to scroll
div::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rajasekhar
Solution 2 Eliran Assaraf