0

-webkit-overflow-touchiOS Safari で使用すると、奇妙な問題が発生します。

div#viewport次の CSS を持つ があります。

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

この div 内にdiv.page、水平サイズの 2 倍のコンテンツ ( ) を表示しています。ユーザーが最後に到達したら、左にスワイプして次のページに移動できます。これは私のハンドラです:

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

2 行目は、ユーザーが新しく表示されたページの左側の部分を見ることができるように、新しく表示されたページを「巻き戻す」必要があります。これはデスクトップでは期待どおりに機能しますが、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');

ページを正しく表示するように「だます」ことができますが、これは別の非常に奇妙な結果をもたらします。ページを操作すると、座標がオフセットされるため、スクロール可能なページの右側でイベントがトリガーされます。これはスクロールすると終了し、座標は正しくなります。ただし、スクロールを手動でトリガーすることはできません。

4

1 に答える 1

0

したがって、これを解決する唯一の方法は、新しいラッパーごとに独自の「勢い」があるため、各.page要素を個別のコンテナーにラップ.viewportすることであり、前のページがまだ残っている間に次のページをプログラムでスクロールできることがわかりました。オーバーフロー スクロールの勢いによって制御されます。

これは私の質問で説明されている問題を解決しますが、iOS は次のスクロールまで座標を更新しないため、このアプローチを使用できなくする別のバグに遭遇しました。詳細については、 https : //bugs.webkit.org/show_bug.cgi?id=90393 を参照してください。

于 2012-11-29T10:38:17.003 に答える