Как реализовать скрол(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>
 

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

Ваш ответ

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