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

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


Задачи
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. Изменение скролл-бара.
Скроллбар рассчитывается из текущей позиции Скролла.

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

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