Скролл

Замена системного скролла. Демонстрация

Причины, красивые мысли:

• Внешний вид. Основная причина отсутствие возможности управлять внешним видом Скроллбара.
• Плавная прокрутка. Часть браузеров делает прокрутку страницы рывками, в теории глаза при плавной прокрутке должны уставать меньше.
• Стандартизация. Единый внешний вид и поведение на разных браузерах и системах.

Задачи
0. Заблокировать системный скролл.
1. Перехват событий.
2. Скроллинг.
3. Изменение скролл-бара.

0. Заблокировать системный скролл.
Присваиваем элементу overflow — hidden, таким образом, те у кого отсутствует поддержка JavaScript останутся с системным скроллом.

body.style.overflow='hidden';

1. Перехват событий.
Существует несколько способов изменения прокрутки страницы:

1. Колёсико мыши. Наиболее часто используемый способ.
2. Кнопки клавиатуры. Стрелочки.
3. Home / End.
4. PageUp / PageDown.
5. Пробел.
6. Скролл бар. Изменение позиции с помощью перемещения Слайдера.
7. Скролл бар, кнопки. Кнопки Сверху / Снизу для перемещения на одну позицию.
8. Скролл бар, позиция. Клик в произвольном месте скроллбара.
9. Сенсорная прокрутка. Тач.

На сенсорных экранах скролл по умолчанию не активен, по этому сенсоры не интересуют, займемся основными событиями на деспотах.

Перехват прокрутки колесиком мыши.

	if(body.addEventListener) 
	{
		if('onwheel' in document) body.addEventListener("wheel", SW, false);
		else if('onmousewheel' in document) body.addEventListener ("mousewheel", SW, false);
		else body.addEventListener ("MozMousePixelScroll", SW, false);
	}
	else
	{
		body.attachEvent ("onmousewheel", SW);
	}

Перехват нажатий клавиш
После перехвата отслеживаем клавищи «38» и «40»

	if(window.addEventListener)
	{
		if('onkeydown' in document) window.addEventListener("keydown", SK, false); 
	}

Изменение позицию с помощью скроллбара
Drag'n'drop и отслеживание изменения позиции.

2. Скроллинг.
После перехвата события, передаем функции Расчёта новые координаты.
В функции будет рассчитана новая позиция Скролла, и передана на Анимацию.

Анимация движения Скрола происходит по Кубической функции, пример на графике:


3. Изменение скролл-бара.
Скроллбар рассчитывается из текущей позиции Скролла.

Демонстрация

Для демонстрации и сравнения Скролла представлены большая и малая страница со скриптом и системным скроллом.
Малая страница: Скрипт / Системный
Большая страница: Скрипт / Системный