Создайте страницу, которая автопрокручивается вверх, если курсор мыши наверху, и вниз — если внизу.
- Когда курсор мыши находится в верхних 20% страницы, автопрокрутка вверх.
- Когда курсор мыши находится в нижних 20% страницы, автопрокрутка вниз.
- Когда курсор посередине, автопрокрутка останавливается.
Важно, что пока курсор мыши находится в пределах верхних/нижних 20%, даже если он двигается, прокрутка должна идти без дерганий, с постоянной скоростью.
Прокрутка должна прекращаться, если курсор покидает окно, или посетитель переключается на другое окно посредством Alt+Tab.
Пример в ифрейме:
P.S. Нужно сделать именно страницу с автопрокруткой, не элемент. Должно работать во всех браузерах.
Будем использовать рецепты для получения и изменения прокрутки из статьи Размеры и прокрутка элементов.
Получить высоту видимой части страницы можно из document.documentElement.clientHeight.
Плавную прокрутку можно осуществить через setInterval, вот так:
setInterval(function() {
window.scrollBy(0, 5);
}, 15)
Начало автопрокрутки будем инициировать по событию onmousemove. В зависимости от координат увидим, где курсор и, при необходимости, запустим прокрутку.
Чтобы не перезапускать прокрутку, если она уже идет (плавность!), её текущее состояние будем хранить в переменной state. Оно одно из: 1(вверх)/-1(вниз)/0(нет прокрутки).
Соответственно, код для прокрутки будет выглядеть так:
var timerId, state;
function setScrollingState(newState) {
clearInterval(timerId); // остановить старую прокрутку
state = newState;
if (!newState) {
return;
}
timerId = setInterval(function() {
window.scrollBy(0, 5*state);
}, 15);
}
Здесь clearTimeout вызывается при любой смене состояния, в том числе если состояние меняется с 0, т.е. автопрокрутка не запущена. При этом значение timerId может быть undefined. Но браузер просто игнорирует такие значения, так что все будет в порядке.
Код для события mousemove:
document.onmousemove = function(e) {
e = e || event;
var height = document.documentElement.clientHeight;
if (e.clientY < height * 0.2) {
if (state != -1) { // сменилось состояние
setScrollingState(-1);
}
} else if (e.clientY > height * 0.8) {
if (state != 1) {
setScrollingState(1);
}
} else if (state) {
setScrollingState(0);
}
}
Когда курсор уходит с документа, включая переключение на другое окно, вызывается событие document.onmouseout. Оно, вообще, вызывается довольно часто. Любой переход с элемента на элемент порождает это событие, и оно всплывает до document.
Нас интересует случай, когда курсор уходит с окна, то есть e.relatedTarget == null (или event.toElement для IE):
document.onmouseout = function(e) {
e = e || event;
if (!e.toElement && !e.relatedTarget) {
setScrollingState(0);
}
}
Полный код решения: tutorial/advanced/timing/scroll-matrix/index.html