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