Disabling/Hiding Scrollbars
Having come across the ByteDance website I was asking myself why you would want to turn off the scrollbars on a web page.
On further reseach I find that this is something you can do and the reason for doing so was explained on the LogRocket website:
and.....
There is a philosophical discussion here relating to scrollbars, looking at the Google Analytics web interface the scrollbars are barely visible but they are there and often difficult to use. The GSC screens/reports have scrollbars on the sub-windows.
This page has the scrollbar hidden/disabled - the page is still scrollable. How this is done on this page.
How I thought I could use this
The display of a page on a mobile device, or any touch screen, often does not need a scrollbar as the default behaviour is to scroll the screen with your finger. If there is no more information to display, who cares?
The code
Here we have both a pseudo-element and -webkit technique used here. (I admit here that I have somewhat muddled pseudo-elements and pseudo-classes - but if I have I dread to think what other mis-directions are out there - mine and others!)
The CSS code for suppressing the scrollbar is:
<style>
body::-webkit-scrollbar{
display: none;
}
</style>
What I don't fully understand at the moment is that the styling is on the body element but on my design layout the scrollbar still shows on the side-bar overlay (which is still in the body section.
How this looks on a iPhone
A comment that I found in my research on this subject was that this would not be the same when viewed on a mobile phone. This does seem to be the case on my iPhone. While I have suppressed the scrollbars on my index page they still show on the iPhone.