Главная / Блог технологий продвижения и разработки сайтов / Полосы прокрутки. Смена текстур

До начала массового использования стандарта XHTML 1.0 в Internet Explorer'е люди меняли цвета отображения скроллбаров (полос прокрутки). Но, стандарты W3C наступают, а альтернативные браузеры не поддержали этого начинания майкрософтцев. Зато поддержали разработчики MooTools. Теперь у полос прокрутки можно менять текстуру, цвет, размер и прочие характеристики.

Собственно, пример полосы прокрутки с новой текстурой а ля OSX внедрён в данную статью и Вы можете лицезреть результат справа. Красяво, правда? Для того, чтобы сделать на своей странице также, качаем пример полос прокрутки с текстурами с сайта-«производителя».

Как я внедрял. Не все файлы из примера с сайта разработчиков понадобятся. Для работы нужны следующие файлы: mooScroll.css, mooScroll-ie6.css, mootools-1.2-more(slider-drag-scroll)yuic.js и google.js (это портированный http://www.google.com/jsapi, в примере с сайта разработчиков этот файл грузится с Гугла).

Скрипты кладутся в папки jscripts и styles. Впрочем, подробнее можете посмотреть на моём примере. Вот архив с кроссбраузерной полосой прокрутки на JavaScript и CSS. Свой пример сделал потому, что у разработчиков подобное реализовано не с полосой от OSX, а с какой-то не очень красивой самопальной. А полоса прокрутки от OSX мне очень понравилась. Кстати, пришлось с ней повозиться, дабы внедрить по отношению к целой странице, т.к. в примере подобная полоса применялась к маленьким блокам и многие CSS настройки не подошли, картинка бара, кстати, тоже не подошла.

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

min-height:100%;
position:absolute;
width:100%;
height:100%;
overflow: scroll;
top:0;
left:0;


В этом весь секрет: стандартная полоса прокрутки удаляется за ненадобностью, а весь контент помещается в абсолютно позиционированный блок. Полоса прокрутки нормально отображается в основных браузерах, однако, есть небольшие «нехорошести» в ИЕ6. Связаны они с тем, что IE толком не рендерит png.