Здесь разберем, как можно создать горизонтальную полосу прокрутки, где можно ее применить на различных блоков, для того, чтоб как можно больше разместить описание.
Первым делом посмотрим один способ для создания обычной полосы прокрутки, которая идет на html для блоков, а затем с использованием скрипта.
Для создания простой полосы прокрутки рассмотрим такую структуру:
Код
<div class="scroll">
Очень длинный текст
</div>
Внутри .scroll будут находиться теги с длинным текстом, которые мы будем ограничивать по высоте. Для этого достаточно создать такой css стиль:
Код
<style>
.scroll {
height: 200px;
overflow: auto;}
</style>
Он означает, что мы принудительно ставим главному блоку высоту в 200px и если содержимое внутри него будет превышать это значение, то автоматически появится полоса прокрутки.
Чтобы полоса прокрутки была только по оси Y: overflow-y: auto; По оси X: overflow-x: auto; Если же необходимо, чтобы прокрутка была всегда включена, то пишите так: overflow-y: scroll; Данный подход, обычно используется на всех сайтах.
Но что, если требуется изменить толщину полосы прокрутки, ее цвет или убрать кнопки прокрутки? Тогда нужно использовать плагин jquery.jscrollpane.min.js на jQuery.
Подключается он очень быстро - 2-мя js скриптами: jquery.jscrollpane.min.js и jquery.mousewheel.js с минимальным количеством css, который вы найдете в примере ниже. jquery.mousewheel.js нужен, чтобы блок передвигался в прокрутке по движению колесика мыши. Если его удалить, то эффект пропадет.
Запускать скрипт очень просто - на класс, к которому нужно прикрепить полосу прокрутки напишите код:
Код
<script type="text/javascript" id="sourcecode">
$(function() {
$('.scroll-pane').jScrollPane({ //На какой элемент задаем прокрутку
showArrows: false //показать стрелки
});
});
</script>
Чтобы менять внешний вид полосы прокрутки - просто меняйте css: цвет прокрутки, кнопок, ее толщина и многое другое.
