0

どうすれば div を一方向に固定したままにし、スクロールでSafari / iPadの他の方向に移動できますか?

はい、デスクトップ ブラウザでは、JavaScript を使用すると非常に簡単です。しかし、iPadでそれをやろうとしたことがありますか..たとえば、これを確認してください。それは醜いです。多くの問題が発生します（少なくとも私には）：

  • 「スクロール」イベントは、スクロールが終了した後にのみトリガーされます。
  • touchstart、touchmove、touchend などのイベントがありますが、これらを使用して垂直移動か水平移動かをすばやく計算して css-attributes を設定しようとすると、スクロールが完了するまで safari は css-changes をレンダリングしません。

私はいつも汚れた、遅れた、または醜い効果に終わります。目標は、緑色のヘッダーが水平方向にのみ移動し、青色の行が白いコンテンツ領域のスクロールで垂直方向にのみ移動することです。

描写

4

2 に答える 2

0

他の誰かが同様の問題を抱えている場合に備えて、これが私の「解決策」です。無効にする

-webkit-overflow-scrolling: touch;

関心のある要素で、sth を使用できます。お気に入り

var element = $("#element");
element.bind('touchmove', function (e) {
    scrollTop = element.scrollTop();
    scrollLeft = element.scrollLeft();
    $(".yAxisHeader").css({ left: 0, top: -scrollTop });
    $(".xAxisHeader").css({ top: 0, left: -scrollLeft });
});

デスクトップ ブラウザ ソリューションからわかるように。トレードオフ: 滑らかなスクロールの慣性効果が失われます。

于 2013-03-23T13:28:23.950 に答える
0

スクロール イベントは、実際にはページ全体をレンダリングし、画面上を移動するだけであるため、モバイル デバイスでは少し危険です。期待どおりにスクロールしないため、CSS で固定位置またはスティッキー位置を使用するのに苦労しています。

スクロール イベントにアタッチするのではなく、別の方法を見つけてドキュメントの位置を確認します。

http://cubiq.org/iscrollは便利なプラグインです

于 2013-03-22T20:14:40.030 に答える