iPad Мерцание при автопрокрутке с использованием плагинов JQuery и Scrollto - PullRequest
Новая
       2

iPad Мерцание при автопрокрутке с использованием плагинов JQuery и Scrollto

31 голосов
/ 08 ноября 2010

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

Это работает во всех браузерах настольных систем в Windows и Mac, но на iPhone и iPad вы получаете ужасноемерцание при прокрутке вниз.

Не совсем уверен, как отладить или исправить эту проблему.

Любые идеи будут очень полезны!

Заранее спасибо, Шади

ОБНОВЛЕНИЕ 1

Самую последнюю страницу можно найти здесь .Все еще не нашли исправления - если бы у кого-то была идея, это было бы удивительно!

Ответы [ 11 ]

60 голосов
/ 06 июня 2011

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

$.scrollTo(*selector*, *time*, {'axis':'y'});
14 голосов
/ 01 декабря 2010

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

$('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;
        }
    });
2 голосов
/ 12 сентября 2013

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

2 голосов
/ 31 марта 2011

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

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

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

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

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

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

Кредит идет на плакат, анимированный, для подсказки.

1 голос
/ 22 апреля 2015

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

1 голос
/ 11 марта 2011

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

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

Вот оно без мерцания http://www.sneakermatic.com

1 голос
/ 19 января 2011

Я также подтверждаю, что метод Тунд До работает безупречно. Если вам нужна «левая / правая» вариация того же (что и я), вот она: 

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

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

1 голос
/ 29 ноября 2010

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

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

Синтаксис 

-webkit-backface-visibility: visibility;

Параметры

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

edit

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

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

и попробуйте 

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

Это просто догадка ...

0 голосов
/ 01 марта 2012

Спасибо Николь за пример с mootools.Это действительно кажется проблемой jQuery при попытке сделать анимацию на ОБАХ scrollTop и scrollLeft.

С mootools: 

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

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

0 голосов
/ 14 февраля 2011

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

Страница:
...