Hide horizontal scrollbar but keep scrolling possible

Question

I'd like to hide the horizontal scrollbar only but keep the scrolling possible.

Questions such as How to hide horizontal bar scrollbar but keep scroll function don't answer this correctly.

According to https://css-tricks.com/custom-scrollbars-in-webkit/ I should be able to use :horizontal but it has no effect.

Demo (horizontal scrollbar is still visible in Chrome v84): https://jsfiddle.net/o5waygL7/

<p>test test test test test test test test test...</p>

html { width: 300px; height: 300px; overflow: auto; }
body { width: 300px; height: 300px; overflow: auto; }

html::-webkit-scrollbar:horizontal { display: none; width: 0; height: 0; }
html body::-webkit-scrollbar:horizontal { display: none; width: 0; height: 0; }

p { width: 1000px; height: 1000px; background: green; }

Also, it seems if I remove the scrollbar for html then body starts getting it. If I remove it for body then html starts getting it... So, it should be disabled for both?

Please help, thanks.

Answer 1

Try this just display none to ::-webkit-scrollbar

html { width: 300px; height: 300px; overflow: auto; }
body { width: 300px; height: 300px; overflow: auto; }

html::-webkit-scrollbar:horizontal { display: none; width: 0; height: 0; }
html body::-webkit-scrollbar:horizontal { display: none; width: 0; height: 0; }

p { width: 1000px; height: 1000px; background: green; }::-webkit-scrollbar {
display: none;
}

<p>
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
</p>