В одном из комментариев на этот мой вопрос мне было предложено использовать скроллбар malihu (плагин для jQuery). Задать вопрос в комментариях на странице разработчика не удалось - там глючит сервер при отправке комментария.
Мне не удалось заставить работать этот плагин таким образом:
<head>
...
<!--css-->
<link rel="stylesheet" href="style/jquery.mCustomScrollbar.min.css">
<!--js-->
<!--<script src="js/jquery-3.0.0.min.js"></script>-->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).on("load",function(){
$("body").mCustomScrollbar({
theme:"minimal"
});
});
})(jQuery);
</script>
</head>
Все пути я проверил - всё нормально; соединение со всеми файлами есть. Скрипт перед закрывающим </head>
тоже работает. Я посмотрел через браузер код HTML после рендеринга: новые элементы были добавлены. Тем не менее, браузер всё ещё показывает стандартный скроллбар. Я что-то упустил?
Обновление
Я проверил решение пользователя Dmitry на одном из своих проектов и оно сработало. Вот как выглядит работающий код: плагин присвоивает <body>
свой класс, "запихивает" содержимое сайта, что было до рендеринга, в первый <div>
и после него добавляет ещё один:
Но на другом моём сайте плагин сработал неверно. Как видно на рисунке ниже, класс <body>
присвоен, а <div>
ы не добавлены:
В чем может дело? Я могу предположить такие варианты:
- У меня адаптивная вёрстка, и html-код формируется как при загрузке страницы (
onload
), так и при изменении ширины окна (onresize
). Каждый раз происходит очистка содержимого, и добавление нового. Подробнее я описал свой код в этом вопросе (не буду дублировать). Я постарался встроить скрипт сроллбара в свой код, но безрезультатно. - А может быть дело в блоке
wrapper
, который также оборачивает всё содержимое сайта? Даже не могу сказать, почему я так предположил, потому что не знаю подробностей технической реализации скроллбара malihu.