Ловимо скролл - стаття на

Для ефективної роботи зі скролл необхідно вирішити такі завдання:

  1. Спіймати подія скролла.
  2. Визначити напрямок.
  3. Заблокувати дефолтну обробку браузером - прокрутку сторінки.

// Функція для додавання обробника подій
function addHandler # 40; object, event, handler, useCapture # 41; # 123;
if # 40; object. addEventListener # 41; # 123;
object. addEventListener # 40; event, handler, useCapture. useCapture. false # 41; ;
# 125; else if # 40; object. attachEvent # 41; # 123;
object. attachEvent # 40; 'On' + event, handler # 41; ;
# 125; else alert # 40; "Add handler is not supported" # 41; ;
# 125;
// Додаємо обробники
/ * Gecko * /
addHandler # 40; window, 'DOMMouseScroll'. wheel # 41; ;
/ * Opera * /
addHandler # 40; window, 'mousewheel'. wheel # 41; ;
/ * IE * /
addHandler # 40; document, 'mousewheel'. wheel # 41; ;
// Обробник події
function wheel # 40; event # 41; # 123;
var delta; // Напрямок скролла
// -1 - скролл вниз
// 1 - скролл вгору
event = event || window. event;
// Opera і IE працюють з властивістю wheelDelta
if # 40; event. wheelDelta # 41; # 123;
delta = event. wheelDelta / 120;
// В Опері значення wheelDelta таке ж, але з протилежним знаком
if # 40; window. opera # 41; delta = -delta;
// В реалізації Gecko отримаємо властивість detail
# 125; else if # 40; event. detail # 41; # 123;
delta = -event. detail / 3;
# 125;
// Забороняємо обробку події браузером за замовчуванням
if # 40; event. preventDefault # 41; event. preventDefault # 40; # 41; ;
event. returnValue = false;
return delta;
# 125;

Натисніть на це посилання для активації прикладу і спробуйте проскролліть сторінку :-).

При правильній роботі буде виводитися Алерт з напрямком скролла без прокрутки сторінки.

Напевно дико піднімати таку стару тему, але на жаль же який день не можу вирішити одну проблему ..
Суть така:
є довга сторінка адаптивного сайта.В середині цієї простирадла є блок з кількома абзацами текста.когда доїжджаємо до цього блоку потрібно заблокувати дефолтну прокрутку і почати виводити абзаци по одному (тобто спочатку з'явиться перший, потім до нього під'їде другий і т.д.)
власне проблема в тому, що ваш приклад Блоч тільки події мишки, а як повторити подібний трюк на тач пристрої?
Буду вкрай вдячна за будь-які підказки або поради.
З.И. думала зробити деградацію коду для тач пристроїв, та тільки в зв'язку з появою тач-комп'ютерів (в сенсі фіг вгадаєш, з мишкою сидітимуть на сайті або пальцем водити) стратегію поведінки в голові укласти не можу.

На touch-пристроях не перевіряв, але, здається, є набагато більш простий варіант: поставте блоку з абзацами тексту фіксовану висоту (якщо не варто) і overflow: scroll. Тоді буде рівно так, як ви пишете:

коли доїжджаємо до цього блоку потрібно заблокувати дефолтну прокрутку і почати виводити абзаци по одному


Спробуйте для прикладу ось такий код:








(Замість цього div - абзаци довгого тексту)




Чи працює так, як вам потрібно?

Те, що не вбиває нас, робить нас інвалідами.