31

私が開発しているページの iOS プラットフォームで奇妙な問題が発生しています。 これが問題のページです。ケーススタディ画像のいずれかをクリックすると、ページは最初に必要なケーススタディを再表示してからスクロールします。

これは、Windows と Mac のすべてのデスクトップ ブラウザーで機能しますが、iPhone と iPad では、下にスクロールするときにひどいちらつきが発生します。

この問題をデバッグまたは修正する方法がよくわかりません。

どんなアイデアでも大いに役立ちます！

前もってありがとう、シャディ

更新 1

最新のページはこちらです。まだ修正を見つけていません - 誰かが何か考えているなら、それは素晴らしいでしょう!

4

11 に答える 11

60

垂直スクロールのみが必要な場合は、{'axis':'y'}scrollTo メソッドの設定として使用できます。 

$.scrollTo(*selector*, *time*, {'axis':'y'});
于 2011-06-06T10:16:15.347 に答える
14

これを試しましたか：

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });
于 2010-12-01T04:15:13.257 に答える
2

ページを垂直方向にスクロールしているだけの場合は、jQueryscrollToプラグイン全体を次の単純な行に置き換えることができます。

$('html,body').animate({scrollTop: $("#scrollingTo").offset().top}, 1000, 'easeOutCubic');

個人的に私はこのようなことをします

$('html,body').animate({scrollTop: $("#step-1").offset().top-15}, 1000, 'easeOutCubic',function(){
  //do stuff
});

スクロール中に他のjsの作業を行おうとすると、ブラウザがクランチになり、アニメーションがスムーズにならないことがわかりました。ただし、コールバックを使用する場合は、最初にスクロールしてから、必要な処理を実行します。

.topの最後に-15を付けました。これは、単に美的目的で、スクロールしていたdivの上端を表示したかったためです。1000は、アニメーションのミリ秒単位の期間です。

クレジットはポスターに送られ、アニメーション化されます。

于 2011-03-30T20:38:48.137 に答える
1

私も同じ問題を抱えていました。

問題は ScrollTo プラグインです。scrollto.js を使用する代わりに、scrollTop で .animate を使用してください。iPad/iPhone でちらつきがなくなりました。

こちらはちらつきなしhttp://www.sneakermatic.com

于 2011-03-10T21:19:40.900 に答える
1

{axis: 'y'}options オブジェクトに含める必要があります。また、割り込みオプションを有効にしていないことを確認してください。でこれをテストできます{interrupt: false}。

于 2015-04-22T15:11:16.480 に答える
1

これがjqueryアニメーションに当てはまるかどうかはわかりません。しかし、以下は CSS アニメーションに影響を与えるようです。

http://css-infos.net/property/-webkit-backface-visibility

構文

-webkit-backface-visibility: visibility;

パラメーター

可視性 変換された要素の背面が表示されるかどうかを決定します。デフォルト値が表示されます。

編集

すべての要素に適用してみて、何が起こるか見てみましょう。

*{
 -webkit-backface-visibility: visible;
}

そして試してみてください

*{
-webkit-backface-visibility: hidden;
}

あくまでも推測ですが・・・

于 2010-11-29T14:23:23.740 に答える
1

また、Tund Do の方法が問題なく機能することも確認します。同じことの「左/右」バリエーションが必要な場合 (私が行ったように)、ここにあります:

$('.pg6').click(function(){
    var target = $('#page6');
    if (target.length)
    {
        var left = target.offset().left;
        $('html,body').animate({scrollLeft: left}, 1000);
        return false;
    }
});

2つを組み合わせて、一番上の位置をつかみ、アニメーションをチェーンして「左/右/上/下」アニメーションにすることもできると思います。

于 2011-01-19T16:59:48.753 に答える
-1

私はiPhoneでも同じちらつきがあります-デフォルトのクリックイベントをキャンセルするpreventDefaultとfalseオプションを返しても。デバイスでは、スクロールする前にページの先頭に戻ろうとしているようです。scrollTopアニメーションとscrollLeftアニメーションの両方を実行している場合は、実際にバグが発生します。これはjQueryの問題です。この問題がないmootoolsを使用したスクロールメソッドを見てきました。このページを参照してください：http：//melissahie.com/

于 2011-02-14T20:46:28.767 に答える
-1

e.preventDefault();各.click()呼び出しに追加する必要があります。これにより、同じ場所に留まるというブラウザのデフォルトの動作が妨げられます。お役に立てれば！
すなわち

$("#quicksand li, .client-list li").click(function (e) {
  e.preventDefault();
  ...
});
于 2010-11-26T01:08:11.740 に答える
-1

mootools の例を示してくれた nicole に感謝します。scrollTopとscrollLeftの両方でアニメーションを実行しようとすると、実際にはjQueryの問題のようです。

mootools の場合:

var scroll = new Fx.Scroll(window, {duration: 1000, wait: false, transition: Fx.Transitions.quadInOut});
scroll.start(y, x);

iOS5でも問題なく動作！

于 2012-03-01T11:34:02.290 に答える