ScrollLeft и ScrollTop на Ipad с использованием цепочки анимации (jQuery) - PullRequest
Новая
       1

ScrollLeft и ScrollTop на Ipad с использованием цепочки анимации (jQuery)

2 голосов
/ 29 марта 2012

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

Во-первых, вот сайт, который я пытаюсь заставить работать: http://madovar.com

Я пытаюсь, когда нажимаю на ссылку связаться с нами вверху, чтобы прокрутить вправоа затем в нижней части, используя animate из jQuery, он отлично работает в FF, IE8 + и chrome, safari.

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

Вот мой сценарий: 

jQuery(document).ready(function($) {
$('.contact').bind('click', function (event) { 

$('html, body').animate({
scrollLeft: "+=2200"            
}, 1500, 'easeInOutExpo').delay(400).animate({
scrollTop: "+=2000"         
}, 3000, 'easeInSine');         
event.preventDefault();

});
});

Пожалуйста, помогите мне, у меня есть поискИнтернет и Stackoverflow для этого.

Спасибо

Ответы [ 2 ]

4 голосов
/ 30 января 2013

У меня недавно была эта проблема.Очевидно, в Mobile Safari есть ошибка, которая не позволяет анимировать scrollTop и scrollLeft на элементах body или html.Кросс-браузерное исправление, которое я нашел в другом ответе StackOverflow (сейчас не могу найти ссылку): 

var left;
$('body,html').stop().animate({pageYOffset: topValue, pageXOffset: leftValue}, {
    duration: 500,
    easing: 'swing',
    step: function(now, fx) {
        if (fx.prop == 'pageXOffset') {
            left = now;
        } else if (fx.prop == 'pageYOffset') {
            window.scrollTo(left, now);
        }
    }
});

Публикуем это здесь на случай, если кто-нибудь еще столкнется с этим вопросом в будущем.

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

Я вижу некоторые ошибки, вызванные вашим синтаксисом в вашем метатеге для области просмотра.Если вы проверяете свою страницу с помощью инструментов разработчика Chrome, вы также должны увидеть ошибки.Ваш метатег должен выглядеть следующим образом: 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Обратите внимание, что правильный синтаксис использует запятые, а не точки с запятой между значениями в атрибуте содержимого.Исправление может исправить ваши проблемы на iPad.

...