Блог ⁄ JavaScript ⁄ Полосы прокрутки. Смена текстур

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

Пример на картинке был реализован на предыдущей версии сайта. После переезда на платформу MODx я не стал реализовывать текстурированные полосы непосредственно в статье. Разгребать множественные конфликты скриптов долго.

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

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

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

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

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