В разных браузерах полоса прокрутки выглядит по разному. И когда возникает необходимость настроить внешний вид скроллбара, появляются мысли что это должно быть как-то связано с CSS. Если вы будете искать информацию об этом, то скорее всего обнаружите что есть стили с помощью которых можно настроить цвет скроллбара. Стоит заметить, что поддерживаются эти стили только браузерами IE 5.5 и выше.
Бывают ситуации когда необходимо иметь полный контроль на внешним видом скроллбара. Например если дизайнер сделал элемент со специфической полосой прокрутки.
Для решения этой проблемы нам на помощь приходит Javascript со своими возможностями. Используя jQuery плагин jScrollPane, можно легко настроить внешний вид полосы прокрути по своему вкусу.
HTML разметка включает всего один внешний контейнер. Контейнер с id="scroll-wrap" в данном случае необходим лишь для позиционирования.
<body> <div class="scroll-wrap"> <div class="scroll-pane"> .... </div> </div> </body>
CSS:
.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:
<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:
$(function() { $('.scroll-pane').jScrollPane({showArrows:true,scrollbarWidth:19,dragMaxHeight:43}); });
Параметр showArrows отвечает за отображение кнопок прокрутки, scrollbarWidth отвечает за ширину полосы, а dragMaxHeight за максимальную высоту перетаскиваемой панели.
Удобство и доступность
Лишая скроллбар его естественного вида, вы рискуете тем, что пользователи не смогут распознать в новом дизайне, элемент, которым они привыкли пользоваться. Вы должны быть уверены, что новый вид ассоциируется именно с полосой прокрутки. Якоб Нильсен написал неплохую статью «Scrolling and Scrollbars», в которой описал, что можно, а что нельзя делать, когда дело касается настройки скроллбара. Учитывайте это когда будете применять данный способ.
Оригинал: Styling Scrollable Areas
Loading ...
А есть такое же только для горизонтального скролбара ?
[...] 3. jQuery: Настраиваем внешний вид скролбара [...]
в FF при увеличении шрифта (по ctrl+ или ctrl+scroll) текст в окошке не прокручивается до конца, а только до размера блока с первоначальным шрифтом
(
это не есть удобно, ибо сча моники довольно большие, и приходится увеличивать почти на каждом сайте шрифт чтобы нормально читать
… наверное надо бы пересчитывать высоту прокручиваемого блока при каждом перемещении ползунка
Спасибо, а то как раз возникли проблемы с позиционированием скролбара.
[...] jQuery: Настраиваем внешний вид скроллбара В разных браузерах полоса прокрутки выглядит по разному. И когда возникает необходимость настроить внешний вид скроллбара, появляются мысли что это должно быть как-то связано с CSS. Если вы будете искать информацию об этом, то скорее всего обнаружите что есть стили с помощью которых можно настроить цвет скроллбара. Стоит заметить, что поддерживаются эти стили только браузерами IE 5.5 и выше… [...]
[...] продвижение сайтов Сочи. Как скрыть реферскую ссылку. Настраиваем внешний вид скроллбара с помощью [...]
А реально ли как отследить чтобы когда скролим не оставляло текст наполовину показаным? Тобто чтобы небыло строк порубаных горзинтально?
В Опере 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 твоё самое понятое и полезное..
Дай бог тебе счастья добрый человек.
[...] общем, вот по этой статье http://www.alexilin.ru/styling-scrollbar/ можно все более менее понятно настроить, только надо [...]
[...] публикации статьи jQuery: Настраиваем внешний вид скроллбара многие просили показать аналогичный пример, но с [...]
Привет, гуру!
У меня такая задача. Область, в которую вставляется ползунок, изменяемой высоты (туда вставляется посредством js разный контент). Как настроить скрипт, чтобы он считывал новую высоту?
Используйте .jScrollPane() на блоке каждый раз после вставки контента. Посмотрите как сделано тут.
Блин, и не в этом тоже дело.
http://more.od.ua.c00055.firehost.com.ua/shablon8.php
Ползунок не хочет тянуться вниз. В чём искать траблы?