IPad Flicker на автоматической прокрутке с использованием JQuery и плагина Scrollto

Ответ 1

Если вам нужна только вертикальная прокрутка, вы можете использовать {'axis':'y'} как параметры для метода scrollTo.

$.scrollTo(*selector*, *time*, {'axis':'y'});

Ответ 2

Вы пробовали это:

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });

Ответ 3

Если вы просто прокручиваете страницу по вертикали, вы можете заменить весь плагин scrollTo для jQuery этой простой строкой:

$('html,body').animate({scrollTop: $("#scrollingTo").offset().top}, 1000, 'easeOutCubic');

Лично я делаю что-то вроде этого

$('html,body').animate({scrollTop: $("#step-1").offset().top-15}, 1000, 'easeOutCubic',function(){
  //do stuff
});

Я обнаружил, что если я пытаюсь работать с другими js во время прокрутки, это делает хруст браузера, а анимация негладкой. Но если вы используете обратный вызов, он сначала прокрутит, а затем сделает то, что вам нужно.

Я положил -15 в конец .top, потому что я хотел показать верхний край div, который я прокрутил, просто для эстетических целей. 1000 - это продолжительность в миллисекундах анимации.

Кредит отправляется на плакат, оживляющий, для наконечника.

Ответ 4

Определение {'axis': 'y'} сделало все правильно! Это помогло мне с мерцанием слайдов/вниз.

Ответ 5

Я не уверен, что это относится к анимации jquery. Но, похоже, это влияет на анимацию CSS.

http://css-infos.net/property/-webkit-backface-visibility

Синтаксис

-webkit-backface-visibility: visibility;

Параметры

видимость  Определяет, видна ли обратная сторона трансформированного элемента или нет. Значение по умолчанию видно.

изменить

Попробуйте применить его к каждому элементу и посмотрите, что произойдет.

*{
 -webkit-backface-visibility: visible;
}

и попробуйте

*{
-webkit-backface-visibility: hidden;
}

Это просто догадка действительно...

Ответ 6

Я также подтвержу, что метод Tund Do работает безупречно. Если вам нужна "левая/правая" вариация одной и той же вещи (как и я), это:

$('.pg6').click(function(){
    var target = $('#page6');
    if (target.length)
    {
        var left = target.offset().left;
        $('html,body').animate({scrollLeft: left}, 1000);
        return false;
    }
});

Я бы предположил, что вы могли бы объединить два, захватить верхнюю позицию и связать анимацию для анимации "влево/вправо/вверх/вниз".

Ответ 7

У меня была та же проблема.

Проблема заключается в плагине ScrollTo. Вместо использования scrollto.js просто используйте .animate с scrollTop. Больше нет мерцания в ipad/iphone.

Здесь он не мерцает http://www.sneakermatic.com

Ответ 8

Вы должны включить {axis: 'y'} в свой объект options. Также убедитесь, что вы не включили опцию прерывания. Вы можете проверить это с помощью {interrupt: false}.

Ответ 9

Вам нужно добавить e.preventDefault(); к каждому вызову .click(). Это предотвращает действие браузера по умолчанию, которое должно оставаться в одном месте. Надеюсь, это поможет!
то есть.

$("#quicksand li, .client-list li").click(function (e) {
  e.preventDefault();
  ...
});

Ответ 10

У меня такое же мерцание на iPhone - даже с preventDefault и возврат ложных опций отмены события click по умолчанию. Похоже, что на устройстве он пытается вернуться к началу страницы перед прокруткой. Если у вас есть анимация scrollTop и scrollLeft, она становится плохой. Это проблема jQuery. Я видел прокручиваемый метод с mootools, который не имеет этой проблемы. Смотрите эту страницу: http://melissahie.com/

Ответ 11

Спасибо nicole за предоставление примера с mootools. Кажется, это проблема jQuery при попытке сделать анимацию на BOTH scrollTop и scrollLeft.

С mootools:

var scroll = new Fx.Scroll(window, {duration: 1000, wait: false, transition: Fx.Transitions.quadInOut});
scroll.start(y, x);

он работает безупречно на iOS5!