Disabling/Hiding Scrollbars
Menu Show Notes Google Analytics 4
Menu Disabling/Hiding Scrollbars
 

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:

" The scrollbar can make an otherwise elegant website look like it’s from the 90s, but thanks to new CSS properties, we can hide the scrollbar without impacting our users’ ability to scroll. "

and.....

" Hiding a scrollbar also helps you save space for other content on your page — it can make for a more consistent user experience across different devices because different operating systems may not render the scrollbar in the same way.
However, the most common reason to hide a scrollbar is to improve mobile viewing experiences. "

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.

Top

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.

Scrollable DIVs

Below is an example from my Magan Carta page. The horizontal scrollbar is hidden but the vertical bar allows multiple links to be placed in the notes on the page.

  1. William de Forz
  2. William de Beauchamp (died 1260)
  3. William d'Aubigny (rebel)
  4. John FitzRobert
  5. Robert Fitzwalter - feudal baron of Little Dunmow, Essex
  6. Gilbert de Clare, 5th Earl of Gloucester (Gibert III)
  7. William Hardell
  8. Henry de Bohun, 1st Earl of Hereford
  9. Richard de Clare, 3rd Earl of Hertford
  10. William of Huntingfield
  11. William de Lanvallei
  12. John de Lacy, Earl of Lincoln
  13. William Malet
  14. Roger de Montbegon
  15. Richard de Montfichet
  16. William de Mowbray
  17. Hugh Bigod, 3rd Earl of Norfolk
  18. Roger Bigod, 2nd Earl of Norfolk
  19. Robert de Vere, 3rd Earl of Oxford - 3rd penny
  20. Richard de Percy
  21. Robert de Ros (died 1227)
  22. Geoffrey de Saye II
  23. Eustace de Vesci
  24. Saer de Quincy, 1st Earl of Winchester

Also note that the links will open in a new tab/window ans will normally be hidden from the casual user or one that has found the page by making a search. In this case I don't want to encourage the visitor to leave possibly to never return. It does not matter on this page.

Links

Top

References: -

  • 1 - How TO - Hide Scrollbar -
  • 2 - Hide Scrollbar - https:// blog.logrocket.com/ hide-scrollbar-without- impacting-scrolling-css - blog.logrocket.com - Using CSS to hide scrollbars without impacting scrolling - Fimber Elemuwa
  • 3 - ByteDance - https://www.bytedance.com/en/ - the home of Tik Tok - Well, actually they are TikTok

Site design by Tempusfugit Web Design -