Как я могу контролировать положение прокрутки во время прокрутки в Safari на iOS? - PullRequest
26 голосов
/ 10 февраля 2012

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

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

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

Есть идеи?

Ответы [ 6 ]

4 голосов
/ 24 апреля 2014

Я настоятельно рекомендую использовать библиотеку 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

Skrollr Demo Пример: http://prinzhorn.github.io/skrollr/

Потрясающий пример из реального мира: http://www.fontwalk.de/03/

4 голосов
/ 13 февраля 2012

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

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

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

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

2 голосов
/ 21 марта 2014

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

1 голос
/ 07 мая 2013

Хотя это невозможно из коробки, можно сказать, вы можете сделать это, используя 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);
}

Заметьте, Бен Сайт Параллакса Телохранителя работает на iPad с помощью iScroll (они используют гораздо более старую версию iscroll и делают это не совсем так, как я описал здесь)

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

0 голосов
/ 22 января 2013

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

0 голосов
/ 17 февраля 2012

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

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

...