MooScroll — клас, який дозволяє настроювати вигляд скрол-бару, використовуючи div-елемент, що прокручується. Виглядати це може так, як на малюнку нижче.

Встановлення MooScroll

Для початку слід під’єднати CSS-файл з оформленням:

<link rel="stylesheet" href="css/mooscroll.css" type="text/css" />

Тоді підключаємо MooTools не нижче версії 1.2 (+ Slider, Scroll та Drag плагіни) і сам клас MooScroll:

<script src="http://www.google.com/jsapi"></script>
<script>google.load("mootools", "1.2.1");</script>
<script src="js/mootools-1.2-more(slider-drag-scroll)yuic.js" ></script>
<script src="js/MooScroll_0.59.js" ></script>

(В цьому прикладі завантаження ядра фреймворку MooTools відбувається з сайту Google)

За замовчуванням, якщо ви задасьте для HTML-елементу на сторінці атрибут class=”scroll”, то тим самим повідомите скрипту до яких саме теґів застосовувати оформлення скрол-бару. Це можна зробити, наприклад, так:

<div class="scroll">Ваш контент буде тут</div>

І на кінець прописуємо створення екземпляру MooScroll:

window.addEvent('domready', function() {
     var myScrollArea = new MooScroll({/*налаштування тут*/});
});

Детальніше про додаткові опції та функції MooScroll читайте на сторінці MooScroll 0.59 beta.

Завантаження

• Веб-сторінка MooScroll.
• Сторінка MooScroll на code.google.com.