As a result of my research into solving the scrollbar problems with adaptive layout, at the moment I decided that the best way to do scrollbar is:

  • Thin
  • Translucent
  • Gently retractable after completing the regular scroll
  • On top of the layout (this means that if the color of the scrollbar is translucent, then the page content will be visible under it and that it doesn’t affect the page content at all; it is just on the topmost layer, to use the terms of graphic editors).

With subtlety and transparency, everything is clear from this demo , with a smooth disappearance - vaguely (I know that maybe this can be done through CSS-animation, but I still don’t really imagine the appearance-disappearance algorithm).

As for "on top" of the layout, the situation is special. In Crome, for example, the scrollbar is initially on top of the layout, and with the help of JS you can ensure that the length of the viewport is always taken without the scrollbar:

var WindowWidth = window.innerWidth;

But as far as I know, so not in all browsers.

So, to the questions:

  • What is the easiest way to make a scrollbar smoothly disappearing after the end of scrolling?
  • How to make the scrollbar be on top of the layout in all browsers (at least in their latest versions of IE, Chrome, Firefox, Safari, Opera)?
  • one
    manos.malihu.gr/repository/custom-scrollbar/demo/examples/… these are excellent options; I embedded 4 times into my projects - user33274
  • It looks good ... As I understand from <div class="mCustomScrollbar" data-mcs-theme="dark"> , this scrollbar is designed for individual blocks, but if you assign the mCustomScrollbar class to the body element, then the whole page will be scrolled . While I still haven't figured out the documentation, I have a question: is this scrolling bar — customizing a standard scrollbar or replacing it? - Bokov Gleb
  • yes in this spirit, in general use, the second block is just the one you needed - user33274

0