使用動畫鏈（jQuery）的Ipad上的ScrollLeft和ScrollTop

我一直在理解爲什麼在每個最新的瀏覽器上我的代碼工作，而不是在iPad上，它的工作原理只有一半。使用動畫鏈（jQuery）的Ipad上的ScrollLeft和ScrollTop

首先，這裏是我努力使工作現場：http://madovar.com

我想，當我點擊聯繫我們在頂部鏈接，滾動到右側，然後在底部，使用jQuery的動畫效果，它在FF，IE8 +和Chrome瀏覽器中的效果非常好。

但是當我登上iPad時，它會像想象的那樣向右滑動，然後開始向下滾動一下，直接向左移動，然後將scrolldown動畫到我的代碼的空白部分。

這裏是我的腳本：

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(); 

}); 
});

請幫助我，我有搜索這個互聯網和＃1。

感謝

來源

2012-03-28 Triben

我看到你的視口元標記引起你的語法一些錯誤。如果你使用Chrome開發者工具檢查你的頁面，你也應該看到錯誤。您的中繼標記應如下所示：

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

請注意，正確的語法在content屬性中的值之間使用逗號而不是分號。解決這個問題可能會解決你的問題在iPad上。

來源

2012-03-28 23:52:06 gowansg

嗯，我試着用逗號，但仍然有同樣的問題。謝謝回覆。任何其他想法？ – Triben 2012-03-29 14:03:31

@Triben你應該看看[this]（http://stackoverflow.com/q/8359748/1289454）的答案。我做了一個快速搜索「jQuery的ipad滾動問題」，並遇到它。讓我知道是否爲網頁正文以外的其他動畫製作。希望這可以幫助。 – gowansg 2012-03-29 16:02:30

我最近有這個問題。很顯然，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); 
     } 
    } 
});

在這裏張貼在此情況下，任何人絆倒。

來源

2013-01-30 17:01:31 asleepysamurai

我剛剛遇到了這個解決方案中最奇怪的問題： window.scrollTo只適用於當前窗口當前位於iOS 6上的Safari 6中的頂部0 ..如果我做了一個手動的window.scrollTo（0），我可以跳轉到窗口。 scrollTo（100） - 但不是更遠.. – Tigraine 2013-08-20 11:17:05

使用動畫鏈（jQuery）的Ipad上的ScrollLeft和ScrollTop

回答

相關問題