Hiding the scroll bar on an HTML page

Question

Can CSS be used to hide the scroll bar? How would you do this?

Answer 1

Cross browser approach to hiding the scrollbar.

It was tested on Edge, Chrome, Firefox, and Safari

Hide scrollbar while still being able to scroll with mouse wheel!

Codepen

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}