В результате своих изысканий по поводу решения проблем скроллбара при адаптивной вёрстке на данный момент я решил, что лучше всего скроллбар сделать:
- Тонким
- Полупрозрачным
- Плавно убирающимся после завершения очередной прокрутки
- Поверх вёрстки (это значит, что если цвет скроллбара сделать полупрозрачным, то под ним будет видно содержимое страницы и что он вообще никак не влияет на содержимое страницы; он просто находится на самом верхнем слое, выражаясь терминами графических редакторов).
С тонкостью и прозрачностью всё понятно из этого демо, с плавным изчезновением - смутно (знаю, что может быть можно это сделать через CSS-анимацию, но алгоритм появления-исчезновения пока ещё не очень представляю).
Насчёт "поверх" вёрстки ситуация особая. В Crome, например, скроллбар изначально поверх вёрстки, и с помощью JS можно добиться того, чтобы всегда бралась длина вьюпорта без скроллбара:
var WindowWidth = window.innerWidth;
Но насколько я знаю, так не во всех браузерах.
Итак, к вопросам:
- Какой самый простой способ сделать скроллбар, плавно исчезающий после окончания прокрутки?
- Как сделать так, чтобы скроллбар был поверх вёрстки во всех браузерах (хотя бы в их последних версиях IE, Chrome, Firefox, Safari, Opera)?
<div class="mCustomScrollbar" data-mcs-theme="dark">
, этот скроллбар предназначен для отдельных блоков, но если присвоить класс mCustomScrollbar элементу body, то тогда будет такой скроллбар для всей страницы. Пока я ещё не разобрался с документацией, у меня вопрос: этот скроллбар - кастомизация стандартного скроллбара или его замена?