0

В результате своих изысканий по поводу решения проблем скроллбара при адаптивной вёрстке на данный момент я решил, что лучше всего скроллбар сделать:

  • Тонким
  • Полупрозрачным
  • Плавно убирающимся после завершения очередной прокрутки
  • Поверх вёрстки (это значит, что если цвет скроллбара сделать полупрозрачным, то под ним будет видно содержимое страницы и что он вообще никак не влияет на содержимое страницы; он просто находится на самом верхнем слое, выражаясь терминами графических редакторов).

С тонкостью и прозрачностью всё понятно из этого демо, с плавным изчезновением - смутно (знаю, что может быть можно это сделать через CSS-анимацию, но алгоритм появления-исчезновения пока ещё не очень представляю).

Насчёт "поверх" вёрстки ситуация особая. В Crome, например, скроллбар изначально поверх вёрстки, и с помощью JS можно добиться того, чтобы всегда бралась длина вьюпорта без скроллбара:

var WindowWidth = window.innerWidth;

Но насколько я знаю, так не во всех браузерах.

Итак, к вопросам:

  • Какой самый простой способ сделать скроллбар, плавно исчезающий после окончания прокрутки?
  • Как сделать так, чтобы скроллбар был поверх вёрстки во всех браузерах (хотя бы в их последних версиях IE, Chrome, Firefox, Safari, Opera)?
3
  • 1
    manos.malihu.gr/repository/custom-scrollbar/demo/examples/… вот отличные варианты , 4 раза я встраивал к себе в проекты
    – user33274
    25 июл 2016 в 6:08
  • Выглядит неплохо... Насколько я понял из <div class="mCustomScrollbar" data-mcs-theme="dark">, этот скроллбар предназначен для отдельных блоков, но если присвоить класс mCustomScrollbar элементу body, то тогда будет такой скроллбар для всей страницы. Пока я ещё не разобрался с документацией, у меня вопрос: этот скроллбар - кастомизация стандартного скроллбара или его замена? 25 июл 2016 в 6:52
  • да в этом духе , в общем пользуйтесь , второй блок как раз тот что вам был нужен
    – user33274
    25 июл 2016 в 7:20

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Посмотрите другие вопросы с метками или задайте свой вопрос.