1

В одном из комментариев на этот мой вопрос мне было предложено использовать скроллбар 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.
2
  • "...браузер всё ещё показывает стандартный плагин" стандартный скролл, видимо. если новые элементы добавлены, то следует приложить скрин, думаю, чтобы понять, как оно не работает
    – lexxl
    26 июл 2016 в 9:34
  • Да не вопрос, скрин я приложу, но едва ли с него будет какая-то информативность (ничего, кроме Ghrome-скроллбара, там нет, а на содержимое сайта никакого влияния нет, так что я его не включил в скрин). 26 июл 2016 в 12:53

1 ответ 1

1

Возможно, нужно прописать нужные css-правила:

$(document).ready(function() {
  $("body").mCustomScrollbar({
    theme: "minimal"
  });
});
html {
  height: 100%;
}
body {
  background: #000;
  height: 100%;
  overflow: hidden;
  margin: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" rel="stylesheet" />

<div style="height: 2000px"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

1
  • Благодарю Вас за ответ. В одном из моих сайтов Ваше решение сработало, но в другом - нет. Я добавил описание в вопрос. 27 июл 2016 в 4:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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