Как реализовать скрол(scroll) в блоке?

Вопрос по верстке, мне я на js сделал выпадающий список. Теперь мне нужно сделать что бы при большом количестве пунктов в списке появлялся скрол и блок был не большим. Желательно что бы scroll можно было оформить своими стилями.

Добавить Комментарий
    Ответ

    Для реализации скрола в div блоке могу посоветовать JScrollPane скрипт
    Ссылка для скачивания файлов: JScrollPane для wp

    Подключаем скрипты:

     <link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/js/jquery.jscrollpane.css"/>
     <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.mousewheel.js"></script>
     <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.jscrollpane.js"></script>
     

    Они должны быть расположены в папке js которая в сое время должна располагаться в папке с вашей темой

    Далее нужно прописать следующий класс для блока которому мы хотим добавить скрол

     <div class="scroll-pane">
     тут ваш контент
     </div>
     

    теперь обязательно происать css минимальной настройки ширины и высоты:

     .scroll-pane {
     width: 400px; /* Ширина видимой области*/
     height: 275px; /* Высота видимой области*/
     overflow: auto; /* Если отключены скрипты это правило позволит отобразить обычный скролл */
     }
     

    Теперь нужно активировать наш скрипт скрола

     <script type="text/javascript">
     jQuery(function()
     {
     jQuery('.scroll-pane').jScrollPane();
     });
     </script>
     

    Добавить Комментарий

    Ваш ответ

    Размещая свой ответ, вы соглашаетесь с правилами сайта.