scrollLeft使用-webkit溢出滾動自動返回到原來的位置：touch

我在iOS Safari上使用-webkit-overflow-touch時遇到了一個奇怪的問題。scrollLeft使用-webkit溢出滾動自動返回到原來的位置：touch

我有一個div#viewport具有以下CSS：

#viewport{ 
    width: 1024px; 
    height: 768px; 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
}

此DIV我兩次顯示的水平尺寸的內容（div.page）。當用戶到達結尾時，他可以向左滑動以進入下一頁。這是我的處理程序：

if ($('.page:visible').offset().left <= -1024){ //only change page when the page is scrolled to its end 
    $('.page:visible').next('.page').buildPage().end().destroyPage(); //custom functions that DO NOT CONTAIN ANY scroll manipulation 
    $('#viewport').scrollLeft(0); 
}

第二行應該是「倒帶」新顯示頁面，讓用戶可以看到新顯示頁面的左側部分。這可以在桌面上按預期工作，但在iOS Safari上會發生以下情況：顯示新頁面，重新繞回並立即反彈回右側（我通過動畫製作scrollLeft而不是僅設置它）來計算出來。爲了讓事情變得更加奇怪，我在調試時仍然可以得到正確的值（0），但顯示的內容與這些值不匹配。

我做錯了什麼？這是iOS Safari中的錯誤還是jQuery的scrollLeft中的錯誤？是否有另一種方法來解決這個問題？

編輯：所以我剛剛發現的是，問題的根源似乎是，當我觸發我刷卡了「有彈性的」滾動沒有完成，因此會與我的scrollLeft的設置地干擾。當我在超時中包裝$('#viewport').scrollLeft(0);以確保反彈已完成時，它的工作方式與預期相同。我仍然不知道如何解決這個問題。動畫結束時會觸發事件嗎？

編輯＃2：所以我設法找出的是，執行以下操作時：

$('#viewport').css('-webkit-overflow-scrolling','auto'); 
$('#viewport').scrollLeft(0); 
$('#viewport').css('-webkit-overflow-scrolling','scroll');

我能夠「欺騙」的頁面變成正常顯示，但是這會產生另一個真奇怪結果是：當我與頁面進行交互時，座標被抵消，所以我將在我的可滾動頁面的右側觸發事件。這在我滾動時結束，座標將是正確的。我不能手動觸發滾動。

來源

2012-11-23 m90

「動畫」是什麼意思？某種「滑動動畫」？然後你可以試試$（elem）.on（「webkitTransitionEnd」，回調）; 編輯：哦，如果你的意思是動畫scrollThft，我認爲你應該切換到動畫-webkit-transform：translate3d（x，y，z）; – zvona

@zvona：通過談論動畫，我指的是使用'-webkit-overflow-scroll：touch'時獲得的「過度滾動內容」（揭示背景）的「彈性」處理。 – m90

所以，我發現了什麼是解決這個的唯一方法是包裝每個.page - 元素在一個單獨的.viewport -container因爲每個新包裝將有自己的「動力」，因此您可以編程滾動翻頁而前一頁仍然受到溢出滾動勢頭的控制。

儘管這解決了我的問題中描述的問題，但我遇到了另一個使這種方法無法使用的bug，因爲iOS在下一次滾動之前不更新其座標。請參閱：https://bugs.webkit.org/show_bug.cgi?id=90393瞭解相關信息。

來源

2012-11-29 10:38:17 m90

scrollLeft使用-webkit溢出滾動自動返回到原來的位置：touch

回答

相關問題