В разных браузерах полоса прокрутки выглядит по разному. И когда возникает необходимость настроить внешний вид скроллбара, появляются мысли что это должно быть как-то связано с CSS. Если вы будете искать информацию об этом, то скорее всего обнаружите что есть стили с помощью которых можно настроить цвет скроллбара. Стоит заметить, что поддерживаются эти стили только браузерами IE 5.5 и выше.
Бывают ситуации когда необходимо иметь полный контроль на внешним видом скроллбара. Например если дизайнер сделал элемент со специфической полосой прокрутки.
Для решения этой проблемы нам на помощь приходит Javascript со своими возможностями. Используя jQuery плагин jScrollPane, можно легко настроить внешний вид полосы прокрути по своему вкусу.
HTML разметка включает всего один внешний контейнер. Контейнер с id="scroll-wrap" в данном случае необходим лишь для позиционирования.
1 2 3 4 5 6 7 | <body> <div class="scroll-wrap"> <div class="scroll-pane"> .... </div> </div> </body> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | .scroll-wrap{ width: 300px; margin: 40px auto; background: #F7F1E5 } .scroll-pane{ width: 290px; height: 200px; padding: 0 0 0 10px; overflow: hidden } a.jScrollArrowUp{ display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; background:url(images/but.gif) no-repeat center top; height:18px; } a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; background:url(images/but.gif) no-repeat center top; height:18px; } .jScrollPaneDrag { position: absolute; cursor: pointer; overflow: hidden; background:url(images/drag.gif) no-repeat left top; height:42px } |
Далее необходимо подключить следующие файлы в секцию head:
1 2 3 4 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jScrollPane.js"></script> <script type="text/javascript" src="jquery.mousewheel.min.js"></script> <link rel="stylesheet" type="text/css" media="all" href="jScrollPane.css" /> |
Файл jquery.mousewheel.min.js необходим в том случае, если необходимо прокручивание содержимого колесом мыши.
и небольшой javascript:
1 2 3 4 | $(function() { $('.scroll-pane').jScrollPane({showArrows:true,scrollbarWidth:19,dragMaxHeight:43}); }); |
Параметр showArrows отвечает за отображение кнопок прокрутки, scrollbarWidth отвечает за ширину полосы, а dragMaxHeight за максимальную высоту перетаскиваемой панели.
Удобство и доступность
Лишая скроллбар его естественного вида, вы рискуете тем, что пользователи не смогут распознать в новом дизайне, элемент, которым они привыкли пользоваться. Вы должны быть уверены, что новый вид ассоциируется именно с полосой прокрутки. Якоб Нильсен написал неплохую статью «Scrolling and Scrollbars», в которой описал, что можно, а что нельзя делать, когда дело касается настройки скроллбара. Учитывайте это когда будете применять данный способ.
Оригинал: Styling Scrollable Areas
А есть такое же только для горизонтального скролбара ?
в FF при увеличении шрифта (по ctrl+ или ctrl+scroll) текст в окошке не прокручивается до конца, а только до размера блока с первоначальным шрифтом
(
это не есть удобно, ибо сча моники довольно большие, и приходится увеличивать почти на каждом сайте шрифт чтобы нормально читать
… наверное надо бы пересчитывать высоту прокручиваемого блока при каждом перемещении ползунка
Спасибо, а то как раз возникли проблемы с позиционированием скролбара.
А реально ли как отследить чтобы когда скролим не оставляло текст наполовину показаным? Тобто чтобы небыло строк порубаных горзинтально?
В Опере 9.2 не раотает, кста.
нафик скролл который не реагирует на прокрутку мышью?
а изчо у вас кнопь submit для комментария скрыта.
Zhinzher, внимательно прочтите статью.
Кнопка отображается в основных браузерах. Вы каким пользуетесь?
Приветствую, подскажи пожалуйста, как сделать «Google Результаты поиска», как у тебя ?
Заранее спасибо.
Truper, плагин Search Unleashed.
А существует подобное решение, только для горизонтального скроллбара ?
ура, нашёл =)
zhinzher, всё работает.
Спасибо, все красиво стало.
Вот только в Опере баг наблюдается — если в прокручиваемом блоке много текста, внезапно появляется полоса прокрутки окна, а при приближении к концу прокручиваемого текста снова исчезает.
Есть ли способы борьбы с этим?
В FireFox 2 при задании свойсва max-height для .scroll-pane скроллер теряет стилизацию и выглядит по-умолчанию.
Нашёл решение. При переносе max-height в .jScrollPaneContainer всё работает хорошо.
Где ты нашёл такое свойство? Я не нашла
Кто нибудь поборол глюк с Оперой, когда появлялась полоса прокрутки окна?
Для бОльшей информативности не хватает объявления стилей для .jScrollPaneTrack(фон полосы прокрутки).
to Mihalytch:
На официальном багсайте вроде сошлись на том, что это баг самой оперы.
А вот глюк в IE 8 http://www.indigo.kolandr.ru черное окно где прокрутка. А в остальных браузерах ок.
У меня тоже в IE не работает…
В нормальном(стандартном скроле) при прокрутке скрола до самого низа или верха скролится начинает сама страница, это очень удобно. не знаете как можно достичь того же эфекта c jquery.mousewheel.min.js
О вот это то что нужно. Почитал коментарии про оперу, у меня в 9.6 работает нормально, так что видимо в опере пофиксили.
Уважаемый автор!
Возможен ли перенос скролбара в левую сторону. При этом попытка вставить в код direction: rtl не принесла успеха.
Мне очень нужно, чтобы скроллбар был слева от текста.
Помогите, плиз!
Используйте параметр
scrollbarOnLeft:true.Видимо, нужны дорполнительные изменения и в css?
Так оно просто не становиться:(
Спасибо за быстрый ответ, приготовился было ждать:)
И еще вопросик.
А если я хочу подложить на место пустого трека какой-то img в виде background (то есть в той трассе, где бегает бегунок) — это возможно?
Да, возможно.
Видимо, нужны дорполнительные изменения и в css?
Так оно просто не становиться:(
Спасибо за быстрый ответ, приготовился было ждать:)
А что-то попроще не знаете? А то 3(2) js + 1 css это многовато для такой маленькой детали как скроллбар.
Не получается что-то привернуть это все. Может быть пример простой напишите, где каждый элемент разбирается или помочь можете мне?
Попробуйте этот вариант, он попроще и не требует никаких javascript библиотек.
От первого, конечно, отличается, но тоже требуюмую функцию реализует. Спасибо Alex
Не за что.
Скрипт не работает с флешем, и другими скриптами для оформления уголов, использование его в полномасштабном проекте не рационально.
Alex, спасибо огромное!
но присоединюсь к вопросам: а как из этой красоты сделать горизонтальный скроллинг?:)
Alex, добрый день! пожалуйста, помогите: в Opera 10 не работает прокрутка скроллинга колёсиком мыши:( что делать?:(
Попробуйте использовать новую версию скрипта для прокрутки. Тут его можно скачать.
спасибо большущее, всё заработало!:)
Спасибо большущее!как раз этого и не хватало,с новой версией скрипта всё нормально прокручивается
а для textarea ни чего нет?
Уважаемый автор, подскажите мне пжта со следующей проблемой. Оформление полосы прокрутки отображается только на страницах, где выбрана только категория и адрес страницы имеет следующий вид: http://www.permskie-medvedi.ru/?category=6 а когда в строке иммется еще и ID, например http://www.permskie-medvedi.ru/index.php?category=14&id=31 то оформление уже не работает. В чем может быть дело?
Заранее, спасибо;-)
Похоже оформление стандартное на обоих страницах. Посмотрел в FF и Opera.
Пардон, временно скрипт меняли, поэтому не отображалось. Можете посмотреть еще раз. Сейчас оформление прежнее.
На страницах разная HTML разметка внутри блока page-wrap, проверьте.
Что вы имеете ввиду?
Вижу разобрались что имел ввиду
Да, спасибо. Не работало из-за подключенного плагина комментариев
У меня проблема такого плана: имеется калькулятор, которой лежит в pane. В калькуляторе добавляются динамически различные поля из-за чего размер контента меняется. Получается что текст уползает вниз а размер pane каким был при загрузке — таким и остается. Как сделать резайз pane, подскажите пожалуйста?
Посмотрите как это реализовано в официальном примере.
Алекс, подскажите пожалуйста!
я увеличила количество информации в div’е, на котором установлена полоса прокрутки, и бегунок вдруг поменял свою высоту — я поняла он меняет её пропорционально высоте дива — а какие строчки надо убрать, чтобы бегунок не менял свою высоту?:)
заранее спасибо.
ой, всё, спасибо, сама разобралась: в js файлике dragMinHeight и dragMaxHeight сделать равными между собой и равными нужной высоте бегунка:)
Пожалуйста
За это отвечают параметры
dragMinHeightиdragMaxHeight.Вопрос непростой: как использовать в joomla?
((
необходимо заменить стиль прокрутки в основном информ. поле сайта
Всю ночь просидел, но решения не нашёл!
Ну, т.е. подключить то я подключил плагин -и стили вроде подключились (т.к. управляется ширина блока из стилей)
Но вот оформление! Не меняет он никак полосу! стандартная остаётся….
Может подскажете что можно предпринять?
В шаблоне Joomla присвойте нужному блоку стиль, например, .info-block;
поместите скрипты в папку js шаблона;
в header’е шаблона index.php пропишите:
<script type="text/javascript" src="baseurl ?>/templates/template ;?>/js/jquery.js»>
<script type="text/javascript" src="baseurl ?>/templates/template ;?>/js/jquery.mousewheel.js»>
<script type="text/javascript" src="baseurl ?>/templates/template ;?>/js/jScrollPane.js»>
jQuery(function()
{
jQuery(‘.info-block’).jScrollPane({showArrows:true, scrollbarWidth:16, dragMinHeight:43, dragMaxHeight:43});
});
+ содержимое CSS скрипта добавьте в CSS файл шаблона, и пути к картинкам изменить не забудьте;)
РНР-тэги обрезало. Вобщем если с шаблонами работали, поймёте
!Ваще супер, весь день искал…)))
спасибо огромное…
Алекс, скажите пожалуйста, реальна ли работа вашего скроллинга в странице, подруженой в div при помощи jquery ajax? (в идеале http://habrahabr.ru/blogs/jquery/20245/ вот таким примерно способом)
как я не пробую, сама по себе страница работает, а как подгружаю при помощи ajax — вместо красивого скроллинга вылезает обычный
Хочу заметить что скрипт этот не мой, а что касается вопроса, то на официальном сайте есть пример с использованием AJAX.
Здравствуйте подскажите пожалуйста как изменить ширину полосы прокрутки (пробовал изменить здесь .jScrollPaneTrack не помагает)
Параметр
scrollbarWidthОтлично!Спасибо Alex всё заработало!
В опере 10.10 не работает, всмысле появляется скролинг всей страницы.
Пример в архиве может не работать, т.к. нужно использовать новую версию скрипта для прокрутки. Скачать можно тут.
Спасибо, попробую
Подскажите, пожалуйста. Включил скрипты скроллбара, в Опере и Мазиле все ок, а вот в IE-6 проблемы, ползунка не видно и постоянно фигурирует какая-то надпись Scroll Up, которую невозможно убрать. И как можно поменять высоту скроллбара? Спасибо!!!
В IE6 должно работать, проверьте правильно ли вы всё сделали.
Высота устанавливается в css:
.scroll-pane{width:290px;height:200px;padding:0 0 0 10px;overflow:auto}В Opera 10.10 какой-то глюк, не хочет до конца прокручивать содержимое. Т.е. прокручивает текст, но не до конца. Что с этим можно сделать?
Проверял в опере 10.10. Всё нормально. Может у вас шрифт увеличен?
Горизонтальный скролл как сделать???
Если текста очень много, то полоса прокрутки меняет свой размер. Становится меньше и выглядит это не красиво. Верх полукруглый, а низ обрезан… Как сделать, чтобы не зависимо от объема информации ползунок изображающий полосу прокрутки не менял своего размера?
Параметр
dragMinHeightопределяет минимальную высоту ползунка.Спасибо! Все работает.
спасибо за скрипт
вопросик тут появился…. если у меня на одной странице необходимо использовать 2 div-а со скроллами, то из них подгружается тока один div… может я что то не так делаю!!!!
2 и более нормально работают, посмотрите примеры на офф. странице.
у меня ситуация маленько другая- использую скрипт tabs, в котором есть девять кнопок раполагающихся слева, при нажатии на каждую из них справа появляется различный текст(без перезагрузки) и мне нужно почти для каждого из этих текстов сделать скролл, так как текста много!!!! Попробовал сделать как в вышепредставленном примере, не получается:(((
Помотрите примеры, там есть вариант с подгружаемым контентом.
Спасибо. Оч помогло
как сделать такой же скроллинг только горизонтальный?
Попробуйте этот плагин.
спасибо, посмотрю, не ожидал такого быстрого ответа)
Помогите пожалуйста, очень нужно перенести скролл в левую сторону, как сделать?
Выше в комментариях уже спрашивали.
А это работает только для diva с текстом? Пытался прикрутить к textarea — не получилось. Не пробовали реализовывать на формах?
не могу разобраться как сделать полосу прокрутки горизонтальной на примере, на который вы дали ссылку. не могли бы вы объяснить всё на таком же простом примере как и с вертикальной полосой прокрутки. очень нужно сделать практически то же самое что и у вас вверху страницы, только с горизонтальной полосой прокрутки.
Недавно создал блог по скриптах на JQuery. Если кому то будет интересно то вот ссылка — vadyos.org.ua
Спасибо тебе дорогой автор. Из всех описаний jspane твоё самое понятое и полезное..
Дай бог тебе счастья добрый человек.
Привет, гуру!
У меня такая задача. Область, в которую вставляется ползунок, изменяемой высоты (туда вставляется посредством js разный контент). Как настроить скрипт, чтобы он считывал новую высоту?
Используйте .jScrollPane() на блоке каждый раз после вставки контента. Посмотрите как сделано тут.
Блин, и не в этом тоже дело.
http://more.od.ua.c00055.firehost.com.ua/shablon8.php
Ползунок не хочет тянуться вниз. В чём искать траблы?
Привет! Спасибо за инфу с демкой.
Сделал скрол из демки, все прекрасно, только он в Опере почему-то инвертированный (в ФФ в этом плане нормально). То есть крутишь колесико, а бегунок в обратную сторону движется (если он уперся в край, то просто не движется). Наверно нужно скрипт прокрутки обновить. Зашел по ссылке, которую вы давали.. не пойму как скачать — уже и зарегистрировался, а все равно нет линка на скачивание http://plugins.jquery.com/node/7146
Подскажите пожалуйста.
Попробуйте взять отсюда
Добрый день!
Такой вопрос: если жёстко не задана высота дива (не указана вовсе или используется соотношение — 80%, например) — всё перестаёт работать. Т.е. даже теоретически нельзя сделать, чтобы работало на дивах переменной, заранее не известной, высоты?
Пример с динамически изменяемой высотой.
Огромное спасибо за быстрый ответ!
Благополучно разобрался.
p.s. Отписался бы вчера — да интернет заглючил…
Прописал HTML
<link type="text/css" rel="stylesheet" href="baseurl ?>/templates/template;?>/css/jScrollPane.css»/>
<script type="text/javascript" src="baseurl ?>/templates/template;?>/js/jquery-1.4.2.min.js»>
<script type="text/javascript" src="baseurl ?>/templates/template;?>/js/jquery.mousewheel.min.js»>
<script type="text/javascript" src="baseurl ?>/templates/template;?>/js/jScrollPane.js»>
$(function()
{
$(‘.scroll-pane’).jScrollPane({showArrows:true,scrollbarWidth:19,dragMaxHeight:43});
});
Скролл появился, но стандартный. Стили вроде работают. В чем дело? Помогите(((( Спасибо.
P.S. Делаю в Joomla
У меня такаеже хрень…
Инструкция:
1) установить мозиллу;
2) поставить firebug;
3) нажать на F12, потом на консоль, потом перезагрузить ту страницу — покажутся js ошибки.
Навскидку могу сказать, что jquery конфликтует с другим фреймворком, использующим доллар.
И код этот следует тогда заменить на:
jQuery(function()
{
…
});
Спасибо, очень помогло )
Подборка scrollbar
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
Для бага с хаотично появляющимся скроллом при прокрутке в говнопере нам помогло
html{overflow:hidden;}
Здравствуйте, такой вопрос… если делать все через html, то плагин отлично работает во всех браузерах. А когда начинаю делать через cms joomla то плагин отображается в ie и ff , а в опере и в safari скрола не видно. В чем может быть причина? Как может повлиять использование плагина в cms на его работоспособность?
Никакой разницы не должно быть. В итоге то всё равно html генерится. Смотрите внимательно что у вас там подключается.
Спасибо за ответ Алексей, да, сейчас все работает.
Вот такая проблемка появляется, при указании доктайп например вот такого некоторые элементы скролла не настраиваются через css, без указания все хорошо работает. Почему такое может быть? И что посоветуете?
Автор,а вы знакомы с системой укоз?Если да,то как этот скрипт установить там?Потому что у меня ничего не получается — я скачал папку,установил в фтп моего сайта,прописал пути.Но застопорилось всё на
Укоз подсвечивает закрывающие теги красным,т.е. код не работает.Что делать?
Здравствуйте, возникла такая проблема: поле в котором, ставится скроллинг, должно растягиваться до конца экрана, в зависимости от разрешения монитора, при этом поле это начинается примерно с 1/3 страницы (не с самого верха). В опере все работает нормально. В IE скроллинг так же работает, но при этом поле растягивается больше чем монитор, и пявляется общий скролинг страницы. А вот в Хроме и FF скролинг вообще не появляется, и поле растягивается на весь текст.
Добрый день — есть такой вопрос — возможно ли при помощи jQuery реализовать скроллбар в виде полукруга, т.е. чтобы бегунок двигался не по вертикали а по дуге или же можно как-то переделать этот скрипт?
Встроил в шаблон joomla — тут же возникла проблема — если в материале на странице есть e-mail, то подгружается только белая пустая страница, на которой не ничего, кроме этого e-mail. Методом проб и ошибок было установлена, что причина кроется именно в этом приложении. Кто нибудь сталкивался?
Супер-полезная инфо!
Долго искал. А кто знает, как отцентировать фрейм без учёта полосы прокрутки?
круто,спасибо огроменное. очень полезно и доступно!