Когда возникает необходимость внедрить в страницу большой кусок текста, но так, что-бы кнопки дейтвия остались в пределах первого экрана, незаменим прием создания встроенного окна с полосой прокрутки. К сожалению, стандартный вариант overflow:scroll; не годиться для IE, да и настроить полосы прокрутки (или скроллеры) с помощью CSS хочется. Решение нам предоставляет простой плагин на jQuery с возможностью оформить полосы прокрутки div элемента. Данный способ хорош тем, что: - Работает со всеми популярными браузерами (Safari 3 и 4, 2 и Firefox 3, IE 7 и 8, Google Chrome)
- Поддерживает колесо прокрутки мыши
- Чистый и понятный HTML
- Длина прокрутки пропорциональна содержанию (масштабируется).
ПримерКак пользоватьсяВы будете удивлены, чтобы увидеть, как легко использовать эту полосу прокрутки. Все, что вам нужно, это включить несколько файлов, а затем обернуть содержание в прокручиваемый дел. 1. Необходимо скачать и включить JavaScript и CSS файлов следующее: prototype.js , slider.js , scroller.js и scroll.css . | 1 | <script src="js/prototype.js"type="text/javascript"></script> | | 2 | <script src="js/slider.js"type="text/javascript"></script> | | 3 | <script src="js/scroller.js"type="text/javascript"></script> | | 4 | <link href="js/scroller.js"rel="stylesheet"type="text/css"media="all"></script> |
2. Добавьте следующие строки кода, куда вы хотите появляться полосы прокрутки. Обратите внимание на вложенность DIV элементов | 1 | <div style="overflow: hidden; height: 250px; width: 600px;"class="makeScroll"> | | 2 | <div style="padding: 0 10px;"> | | 3 | ** text to scroll goes here ** | | 4 | </div> | | 5 | </div> |
Важной частью является предоставление DIV makeScroll класса. Вы должны указать высоту и ширину DIV, в противном случае, это займет максимальная высота и ширина. Внутренний DIV в коде выше, не является обязательным. Я использую его, чтобы дать некоторое пространство между скроллер и текст. Настройка и оформлениеСкроллер состоит из трех частей к нему и стиль каждого из них могут быть настроены. Части: - кнопки прокрутки
По умолчанию, кнопки прокрутки появляются по обеим сторонам от ручки. Если вы хотите, вы можете разместить кнопки рядом друг с другом тоже. Стиль, который я использовал в приведенном выше примере выглядит следующим образом:
| 1 | .scroll-track-top { | | 2 | height:10px; | | 3 | width:10px; | | 4 | background-image: url('images/track_top.png'); | | 5 | } | | 6 | | | 7 | .scroll-track-bot { | | 8 | height:10px; | | 9 | width:10px; | | 10 | background-image: url('images/track_bot.png'); | | 11 | } |
В зависимости от конструкции, иногда вы не хотите кнопки прокрутки для отображения. Пользователь прокручивает путем перетаскивания выделите ручкой. В таких случаях, необходимо добавить display: none !important к обоим классам. - Фон полосы прокрутки
Стиль это очень просто. Вы определяете фоне области. Это может быть цветной или графика, как в примере выше. Если вы используете графический, помните, что это будет плитки вертикально.
| 1 | .scroll-track { | | 2 | background-image: url('images/track_bg.png'); | | 3 | } |
- Кнопки "вверх", "вних" и сам слайдер:
Прокрутки ручка сделана из трех сегментов: топ-ручка, ручка-нижней и средней части ручки. Средняя часть ручки будет масштабироваться вверх и вниз в зависимости от длины текста. Верхней и нижней имеют фиксированную высоту. Опять же, в зависимости от конструкции, вы можете скрыть ползунок полностью. Это может быть сделано путем добавления display: none !important для всех трех стилей.
| 1 | .scroll-handle-top { | | 2 | height: 8px; | | 3 | width: 10px; | | 4 | background-image: url('images/handle_top.png'); | | 5 | cursor: pointer; | | 6 | } | | 7 | | | 8 | .scroll-handle-bot { | | 9 | height: 8px; | | 10 | width: 10px; | | 11 | background-image: url('images/handle_bot.png'); | | 12 | cursor: pointer; | | 13 | } | | 14 | | | 15 | .scroll-handle { | | 16 | background-image: url('images/handle_mid.png'); | | 17 | cursor: pointer; | | 18 | } |
ЗаключениеОсуществление скроллер Это только одно, что я наткнулся, что поддержка колеса прокрутки мыши. Были ли некоторые другие утверждали, для его поддержки, но они либо слишком сложны в использовании или они не работают на всех платформах. Единственный недостаток с этой реализации является то, что не поддерживает горизонтальную прокрутку и он не может автоматически прокрутки, когда вы выбираете текст. Но в большинстве случаев, у Вас должен вертикальной прокрутки, и он делает большую работу в этом.
Оригинал статьи
By Arpan Dhandhania
| 