Задать вопрос

Как правильно запрограммировать поэкранный скроллинг?

Отслеживая onmousewheel я столкнулся с проблемой на тачпаде маков - там генерируется инерционный скроллинг, т.е. после вызова скролла на тачпаде, в зависимости от силы "толчка", событие вызывается еще множество раз, постепенно ослабевая. При чем preventDefault или return false не блокируют вновь генерируемые события.

Решения за два дня не смог найти ни самостоятельно, ни нагугливая (даже в ин.яз. сегменте) - где-то что-то близкое есть, но не конкретно моя проблема.

Отслеживать onscroll я тоже не могу, потому что это событие вызывается так же, как и mousewheel, а заблокировав полностью mousewheel я не получу onscroll.

Я уже в полном упадке с этой проблемой.
Может есть другие варианты поэкранного скроллинга? (плагины не юзаю, так как они довольно узкой направленности и так же криво работают)
  • Вопрос задан
  • 1854 просмотра
Подписаться 4 Простой 2 комментария
Решения вопроса 1
@mrSeller Автор вопроса
На данный момент решил проблему так:
Посмотрел чему равен e.originalEvent.wheelDelta, при прослушке mousewheel.
При скролле на тачпаде значение быстро нарастает от 3 до неопределенного числа (в зависимости от силы толчка - может быть сотня, может 400, может больше, может меньше). Далее начинает медленно затухать так же до 3. Меньше 3 оно никогда не равно.

Покумекал, прикинул, потестил и выяснил, что для моего скрипта оптимально будет реагировать на модуль дельты (Math.abs(e.originalEvent.wheelDelta)) больше 25 - таким образом медленно затухающая инерция после прошествия 1000мс (минимальное время на скролл в моем скрипте) уже будет игнорироваться, как и совсем слабые (случайные) толчки.

Правда, не знаю как мышь генерирует эту дельту и что там получится.

UPD: Решил переделать и придумал такую логику:
При каждом вызове mousewheel сравниваю значение e.originalEvent.wheelDelta с прошлым значением
$(document).on('mousewheel', function (e) {
    e.preventDefault();

    // действо происходит в методе класса, it === this 
    // (в каждом методе создаю переменную it, равную this - для удобства)
    // it.scrollDelta - свойство класса - изначально равно null
    if ( Math.abs(e.originalEvent.wheelDelta) > it.scrollDelta ) {
        console.log('New Event');
        // т.к. условно это новое событие, то мы вызываем нужные нам скрипты
        // проблемка только в том, что сначала по нарастающей идет постоянный вызов,
        // но у меня он игнорируется за счет блокирования скрипта на время анимации;
        // эту проблему можно решить, вызывая "новое событие" только первый раз,
        //  а дальше вызывать его только после начала затухания
    }
    it.scrollDelta = Math.abs(e.originalEvent.wheelDelta);
});

PS: Остается только придумать, как различать здесь мышь и тачпад, ведь у мыши то, скорее всего, дельта будет всегда одинаковой (кто-то может замерить как мышь себя ведет?)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Olek1
@Olek1
https://alvarotrigo.com/fullPage/ - ищите форки
P.S. опытные пользователи не положительно ставятся к такой реализации, так как им кажется что их воспринимают за не умеющих пользоваться прокруткой
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Rocket Смоленск
от 80 000 до 130 000 ₽
div. Ставрополь
от 40 000 до 90 000 ₽
Wanted. Санкт-Петербург
До 220 000 ₽
18 дек. 2024, в 16:42
2000 руб./за проект
18 дек. 2024, в 16:33
2000 руб./в час
18 дек. 2024, в 16:06
5000 руб./за проект