web-dev-qa-db-ja.com

JQueryとScrolltoプラグインを使用した自動スクロールでのiPadフリッカー

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

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

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

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

よろしくお願いします、シャディ

UPDATE 1

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

iphonejqueryipadiosscrollto
31
Shadi Almosri

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

$.scrollTo(*selector*, *time*, {'axis':'y'});
60
wsbrs

これを試しましたか：

$('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;
        }
    });
14
Tùng Đỗ

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

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

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

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

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

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

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

2
Eric Warnke

{'axis'： 'y'}を定義することで、正しくなりました。スライドアップ/ダウンのちらつきに役立ちました。

2
Indrek Palm

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

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

構文

-webkit-backface-visibility: visibility;

パラメーター

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

編集

すべての要素に適用して、何が起こるかを確認してください。

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

試してみてください

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

それは本当に推測です...

1
dubbelj

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

1
Önder Ceylan

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

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

ここではちらつきはありません http://www.sneakermatic.com

1
animate

また、TundDoの方法が問題なく機能することを確認します。 （私がしたように）同じものの「左/右」バリエーションが必要な場合は、次のとおりです。

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

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

1
Brad M