Ростелеком ТВ 

Как сделать скролл. Два способа, как сделать вертикальный и горизонтальный скролл div’а через jQuery и не только

Иногда бывает просто необходимо сделать на странице блок, который бы имел свою полосу прокрутки. Конечно тут вспоминаются фреймы, но за то, что они давно уже отжили своё, они нам не подходят. Хотелось бы какое-нибудь решение, где обычному div"у можно было бы присобачить скролл. И такое решение есть, и не одно, а всё с использованием возможностей AJAX.

Вертикальный скролл с помощью jScrollPane Общие слова

jScrollPane - это плагин к любимейшей библиотеке jQuery . Позволяет он приделывать вертикальный скролл div"у. Скролл можно конфигурировать по внешнему виду как угодно. На странице плагина (ссылка "инфо") можно найти различные способы его применения. Среди них выделю два: первый - в нём предложены основные способы и внешние виды скроллов, второй - показана реализация скроллинг в скроллинге, а также скроллинг всей странице как таковой. Скачать плагин можно с официального сайта, но можно и с моего

Маленькие хитрости

Плагин я использовал в практике несколько раз. Один из таких примеров можно видеть . Внешний вид его нестандартен, что есть хорошо - можно лепить, всё что душе угодно (не душе, батенька, а заказчикам, заказчикам - прим.ред. ).

Иногда плагин требует установки дополнительныйх плагинов, чтобы работало колёсико мыши для скролла и чтобы изменялся размер скроллинга в зависимости от количества контента. Но, как показала практика, всё работает и без них . Конечно, может у меня сборка плагина какая-то спешал, но вряд ли, качал с официального кажется.

Пример

Совсем одробно разбирать код не буду, в принципе ничего сложного там нет. Однако на некоторых моментах остановлюсь.

HTML-файл. Структура блока со скроллом следующая



Контент

Есть внешний div с классом, есть внутренний div с идентификатором и обязательным классом scroll-pane. Всё. Вызов функции производится следующим образом:


$(function()
{
$("#vnutrenniy).jScrollPane({showArrows:true, scrollbarWidth: 16, arrowSize: 16});
});

При вызове указываются различные параметры, типа ширины скроллбара (scrollbarWidth), размера его стрелочек (arrowSize) и так далее. Основные из них следующие:

scrollbarWidth [число] - ширина скроллинга (по умолчанию 10)

scrollbarMargin [число] - отступ слева от скроллбара (по умолчанию 5)

wheelSpeed [число] - скорость колеса прокрутки в пикселах (по умолчанию 18)

showArrows [логическое] - показывать графические стрелочки или нет (по умолчанию false)

arrowSize [число] - высота стрелочки, если showArrows=true (рассчитывается через CSS, если не указана)

dragMinHeight [число] - минимальная высотка бегунка (по умолчанию 0)

dragMaxHeight [число] - максимальная высота бегунка (по умолчанию 99999!)

scrollbarOnLeft [логическое] - если скроллбар нужен слева, ставим true.

Теперь откроем файл jscroll.css. Смотрим следующие строки.

8-15 строки. Внутреннему div"у ставим ширину и высоту (!), оверфлоу (не обязательный параметр кажется), паддинг скорее всего понадобится, остальное неважно.

17-19 строки. Внешний div. Вот ему ни в коем случае нельзя прописывать высоту , и обязательно нужно указывать float: left . Всё это делается с одной целью - чтобы Опера 10 нормально работала со скроллом. Если это не соблюсти, то скролл дива будет синхронен со скроллом браузера и в итоге получится полная чушь. Помните об этом.

23-57 строки. Стили картинок для скролла

Изменение остальных строк по идее не нужно.

Вертикальный и горизонтальный скролл на FleXcroll

Не так ознакомился с этим скриптом. Он идёт без использования jQuery, что является плюсом (не всегда ж jQuery нужен). Вторым плюсом будет то, что есть горизонтальный скролл. Третий плюс заключается в том, что в архиве с плагином приложены примеры использования, причём хорошие, разноплановые, за что большой респект.

С плагином на проектах работать не приходилось, но первое знакомство оказалось приятным. Единственный замеченный минус заключается в том, что при наведении мышкой курсор не превращается в "ручку". Мне кажется это минус, так как интуитивно непонятно может быть скролл это или нет. Однако, мне думается, через css всё исправить не будет проблем.

В завершении

Вертикальные и горизонтальные скроллы для div"ов не являются проблемой в реализации, всё просто и легко осуществимо. Поэтому дерзайте, используйте, открывайте новое. Всегда буду рад услышать комментарии, вопросы, пожелания=).

Здравствуйте друзья!
В последнее время у читателей блога проявился повышенный интерес к созданию и расширению функционала . Совсем недавно я попытался подробно рассказать, как встроить в (текста), надеюсь у меня это получилось.

Сегодня один из посетителей блога заметил такую особенность, что если добавить в модальное окно слишком много текста, то оно вытягивается по длине и невозможно прокрутить вверх, чтобы посмотреть весь текст целиком, да и кнопка закрытия при этом скрывается за пределы видимости, что само собой уже ни есть хорошо. Конечно модальное окно прекрасно закрывается кликом в любом месте страницы, но как правильно заметил (от его коммента и пляшем), не все посетители сайта с этим могут справиться... Соответственно у читателя возник вопрос, как добавить в данное модальное окно полосу прокрутки?

Решение и весь механизм исполнения, оказался очень прост, не важно, будете вы выводить текст в главное окно или в диалоговое. Полосу прокрутки можно приделать даже к кнопке! Давайте вместе с вами, уважаемые читатели, детально рассмотрим, как можно поместить в модальное окно объемный текст используя полосу прокрутки, тем самым сохраняя размеры окна.

Пример посмотрели, наиболее любознательные первым делом взглянули на исходный код демо-страницы и все сразу стало ясно, ничего сверхестественного. Можно было использовать textarea ,iframe и саму страницу — тег body , в которых гипотетически может появляться полоса прокрутки, но я применил div — контейнер, прописав в стиле все необходимые свойства. В CSS существует замечательное свойство , которое управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

Это свойство имеет несколько значений, в нашем случае использовал overflow: auto , полоса прокрутки будет добавляться только по необходимости, т.е. когда размер текста превысит размеры блока. Для того чтобы отображалась постоянно, необходимо свойству overflow присвоить значение scroll

Важно отметить, если вы выбрали для размещения контента модальное окно шириной 500px, следует задать ширину блока с текстом чуть меньшую в пределах 480px. Высоту можете выставить любую, хотя не стоит устанавливать слишком малую, узкое окно смотрится не совсем красиво, да и читателю придется постоянно пользоваться прокруткой. В своем примере я установил высоту div -контейнера в 300px, вам же никто не мешает экспериментировать с данным параметром, в ту или в другую сторону.

HTML/CSS

В конечном итоге, в разметке html, мы получаем незамысловатый и легко запоминающийся код, который в последствии, вы без особого труда вставите в :

Бла-бла-бла - (текст) Бла-бла-бла - (текст) Бла-бла-бла - (текст) Бла-бла-бла - (текст) Бла-бла-бла - (текст) Бла-бла-бла - (текст)

Если всё сделаете правильно, то у вас должно получиться отличное всплывающее окно с полосой прокрутки, в работе над этим вам всегда поможет наглядный пример:

Существуют и другие, не менее интересные методы решения этого вопроса, мы рассмотрели, пожалуй самый простой способ, без излишнего нагромождения кода и использования дополнительного форматирования свойств полосы прокрутки (scrollbar ), про которые написано давно, много и подробно, стоит лишь воспользоваться поисковиком, и на вас вывалится не одна тысчонка страниц с инфой по теме.
Ну, а мне остается сказать: До свидания!

PS: Меня часто спрашивают, как попасть в Google+? Все очень просто, переходите по ссылке представленной ниже, вводите свой гугловский логин и пароль и начинайте свою бурную деятельность, при этом хотелось бы, что бы вы добавляли меня в свои круги, так как будет много полезного и интересного -)))

У нас нет образования, но есть вдохновение, если бы я получил образование, то я бы стал дураком.

Bob Marley

С Уважением, Андрей


3. Принудительная установка вертикальной и горизонтальной прокрутки в блоке CSS
4. Пример div блока с прокруткой

В данной статье мы разберём вопрос создания блока (div) фиксированного размера с возможностью прокрутки по горизонтали и вертикали. Это можно реализовать средствами CSS. За это отвечает свойство overflow .

О полезном свойстве overflow Свойство overflow отвечает за отображение содержания блочного элемента. Можно применить в том случае, когда контент не помещается полностью и выходит за область блока.

overflow-x - отвечает за отображением содержания блочного элемента по горизонтали.
overflow-y - отвечает за отображением содержания блочного элемента по вертикали.

Код CSS

Prokrutka {
overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если содержимое больше блока */
}

Свойства и значения overflowvisible - отображается все содержание элемента, даже за пределами установленной ширины.
hidden - отображается только область внутри элемента, остальное скрыто.
scroll - принудительно добавляется горизонтальная (y) или горизонтальная (x) полоса прокрутки.
auto - автоматом добавляется горизонтальная полоса прокрутки, в случае если блок меньше.

Рассмотри пример класса CSS. В width и height устанавливаем нужные нам ширину и высоту блока (за них не будет выходить содержимое блока), а свойством overflow: auto; задаем прокрутку по горизонтали в случае надобности

Код CSS

Prokrutka {
width:150px; /* ширина нашего блока */
height:100px; /* высота нашего блока */


overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если больше блока */
}

Принудительная установка прокрутки в блоке CSS Можно также принудительно создать прокрутку по высоте и ширине. Для этого каждой оси: overflow-y: scroll; (вертикаль) overflow-x: scroll; (горизонталь) укажем параметр scroll, принудительная прокрутка.

Код HTML и CSS

Prokrutka {
height:150px; /* высота нашего блока */
background: #fff; /* цвет фона, белый */
border: 1px solid #C1C1C1; /* размер и цвет границы блока */


}

Пример div блока с прокруткойКод HTML и CSS



Пример работы CSS


.prokrutka {
height: 200px; /* высота нашего блока */
width: 200px; /* ширина нашего блока */
background: #fff; /* цвет фона, белый */
border: 1px solid #C1C1C1; /* размер и цвет границы блока */
overflow-x: scroll; /* прокрутка по горизонтали */
overflow-y: scroll; /* прокрутка по вертикали */
}



А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации.



Одно из свойств overflow можно убрать, тогда останется прокрутка только по одной оси, чего вполне достаточно.
Посмотреть работу скрипта на примере ниже.

Приветствую, дорогие друзья. Как Вы возможно заметили, что практически во всех браузерах прокрутка на сайтах очень резкая и не красивая. И конечно же хотелось бы сделать прокрутку для своего сайта более плавной, естественно это можно сделать и к тому же сильно не напрягаться. Делается это с помощью простого JQuery плагина и нескольких правил CSS. А для того, чтобы посмотреть как это всё работает предлагаю Вам взглянуть на демо, которое находится ниже.

Ι

Ну а теперь давайте перейдём прикреплению плавной прокрутки к нашему сайту.

HTML

Для начала нам нужно будет прикрепить библиотеку JQuery. Если она у Вас уже прикреплена, пропустите этот шаг:

Затем нам нужно прикрепить сам JQuery плагин, который и отвечает за нашу плавную прокрутку, и вместе с ним же идут отдельные правила CSS которые изменяют саму полосу прокрутки на сайте. Подробнее на счёт полосы прокрутки мы поговорим подробнее в следующем уроке, а пока что только плавная прокрутка. А вот и сами правила и плагин:

Всё. Теперь первый и немаловажный шаг мы уже сделали. Теперь нам нужно добавить одно простое правило в стили CSS нашего сайта.

CSS html, body{ height: 100%; }

Это нужно для того, чтобы дать понять нашему плагину, что ширина страницы растянута и является 100% в высоту. Обязательно добавьте это правило в CSS иначе прокрутка работать не будет.

Скрипт

А сейчас предлагаю подробнее разобрать демо пример. И начнём мы с HTML.

HTML в демо Плавная прокрутка для сайта Контент Привет, Это текст для демонстрации плавной прокрутки страниц на Вашем сайте. Действительно не плохо смотрится, не правда ли:) Этот текс будет повторяться. (function($){ $(window).load(function(){ $("body").mCustomScrollbar({ theme:"dark-thin" }); }); })(jQuery);

Как Вы можете видеть, что тут я использовал совершенно стандартную разметку HTML5, со всеми вставленными скриптами и CSS файлами о которых мы говорили выше. Думаю, что тут и объяснять нечего, если Вам будет что либо не понятно обязательно спросите в комментариях.

Ну а сейчас давайте взглянем на CSS правила.

CSS из демо @import url(http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic); @import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic); body{ background-color: #fff; color: #555; font-size: 14px; font-family: "Bad Script", cursive; margin: 0; padding: 0; min-width: 480px; } html, body{ height: 100%; } h2{ font-size: 80px; text-align: center; font-family: "Lobster", cursive; font-weight: 700; font-style: italic; color: #444; } hr{ height: 0; border: none; border-bottom: 1px solid #eee; border-top: 1px solid #eee; margin-bottom: 50px; clear: both; } .cont{ font-size: 30px; margin: 0 auto; padding-top: 20px; width: 50%; max-width: 50%; } .text{ padding-top: 15px; padding-bottom: 20px }

CSS правила так же очень просты и их не много, так же Вы можете видеть, что тут прикреплены шрифты от Google, для того чтобы визуально демо выглядело красиво.