Как реализовать скрол(scroll) в блоке?
Решено
Вопрос по верстке, мне я на js сделал выпадающий список. Теперь мне нужно сделать что бы при большом количестве пунктов в списке появлялся скрол и блок был не большим. Желательно что бы scroll можно было оформить своими стилями.
1 Ответ(ы)
Ответ
Для реализации скрола в 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>