Как контролировать положение прокрутки во время прокрутки в Safari в iOS?

В настоящее время я использую $(window).bind('scroll', foo); для мониторинга $(window).scrollTop() и создаю эффект parallax.

Во всех настольных браузерах foo() вызывается для каждого пикселя, который пользователь прокручивает, и все хорошо и денди. В Safari в iOS событие прокрутки запускается только после того, как прокрутка завершена.

Я добавил $(window).bind('touchmove', foo);, чтобы удостовериться, что функция вызывается во время салфетки в iOS, и она меня немного улучшила. Когда пользователь отпускает палец, страница продолжает прокручиваться, но событие перестает стрелять.

Любые идеи?

Ответ 1

Когда я увидел ваш вопрос, я планировал сделать polyfill для этого (если такого не существует?). К сожалению, у меня было очень мало времени.

Идея состоит в том, чтобы запустить setInterval setInterval, и он проверяет, изменился ли document.body.scrollTop с последнего времени, например. за каждые 20 миллисекунд. И если это так, то мы вручную отправляем событие прокрутки. В противном случае мы clearInterval, поскольку, видимо, больше не происходит прокрутки.

Это было бы кратким. Если у вас будет больше времени (чем я), тогда не стесняйтесь попробовать эти рекомендации.

Изменить: Теперь, читая далее, та же идея, кажется, предлагается по другому ответу. Вы уверены, что интервалы останавливаются при прокрутке на iPad?

Ответ 2

Я настоятельно рекомендую использовать javascript-библиотеку "Skrollr". Это, безусловно, лучший вариант анимации мобильной прокрутки, который я нашел на сегодняшний день, и очень легко быстро встать и работать. Создавайте анимацию и управляйте CSS на основе позиции прокрутки и начала. Создайте столько позиций прокрутки данных и анимаций, сколько вам нужно для большинства стандартных свойств CSS.

В следующем примере цвет фона будет анимироваться в течение прокрутки на 500 пикселей:

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>

Оформить репозиторий на Git: https://github.com/Prinzhorn/skrollr

Пример демограммы Сквормера: http://prinzhorn.github.io/skrollr/

Удивительный пример реального мира: http://www.fontwalk.de/03/

Ответ 3

В веб-странице Apple для iPhone 5c используются некоторые эффекты прокрутки параллакса, которые, кажется, продолжаются, когда ваш палец все еще касается экрана и прокрутки. Поэтому я думаю, что javascript не может быть полностью отключен во время прокрутки. Tumult Hype также предоставляет эту функциональность.

Ответ 4

Пока это невозможно из коробки, так сказать, вы можете сделать это, используя iscroll

Итак, вы должны использовать iScroll для мобильных устройств/планшетов iOS и Android и использовать то, как вы сейчас это делаете для настольных устройств.

iScroll имеет множество опций для функций обратного вызова, которые будут вызываться в определенных событиях, таких как "onScrollMove", "onBeforeScrollEnd", "onTouchEnd" и т.д. К сожалению, нет возможности выполнить обратный вызов "КАЖДОЕ изменение позиции, в том числе изменения, вызванные импульсом прокрутки после того, как пользователь остановился, коснувшись экрана". Но, достаточно легко добавить один.

В источнике iScroll вокруг строки 127 рядом с комментарием "События" добавьте новую переменную:

onPosChange: null

Затем вокруг строки 308 в конце функции "_pos" добавьте эту строку:

if (this.options.onPosChange) this.options.onPosChange.call();

(это просто вызовет функцию, переданную в опции onPosChange, если она существует).

Сделав это, следующий примерный код будет устанавливать iScroll для div с id = "iscroll_container" и будет печатать Y-смещение на консоли каждый раз, когда он изменяется:

var myScroll;
function loaded() {
    myScroll = new iScroll('iscroll_container', { onPosChange: actOnScroll });
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

//Use this for high compatibility (iDevice + Android)
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

function actOnScroll(){
    console.log('got a scroll move! Vert offset is: ' + myScroll.y);
}

Заметьте, Ben the Parguax сайт Bodyguard работает на iPad с помощью iScroll (они используют гораздо более старую версию iscroll и не делают этого точно так, как я описал здесь)

Кроме того, Жизнь сайта Pi Parallax отлично работает на iPad - я не могу понять, как они это делают, но по крайней мере это доказывает, что это возможно!

Ответ 5

Это может быть ошибка с самим jQuery: http://bugs.jquery.com/ticket/6446

Этот билет был открыт некоторое время и относится к iOS 4, но, возможно, вам стоит исследовать вычисление положения прокрутки с помощью чистого javascript.

Ответ 6

Как я знаю, во время прокрутки на большинстве мобильных устройств не выполняется javascript. Существуют некоторые обходные пути (например, iscroll). Iscroll использует css-метод "transform". Но во время прокрутки нельзя запускать javascript. Я полагаю, что сглаживание алгоритма слишком дорого.