0

私のクライアントは、発信記事を現在のスクロール位置に残し、新しい記事を一番上に表示する記事スクローラーを必要としています。

CSS3 トランジションを使用してこれを達成しました。送信記事の上マージンを現在の $(window).scrollTop() 値に等しい負の値に設定し、$(window).scrollTop(0) を使用してページを一番上までスクロールします。 ）。スライドが完成したら、送信記事の上余白をゼロにリセットし、次のトランジションに備えます。簡単な例をhttp://www.siblify.com/stackslider/にアップロードしましたが、「次の」クリックスクロールを具体的に管理するコードは次のとおりです。

#container {
height:auto;
width:800px;
position:relative;
overflow:hidden;
margin:0 auto;
padding:60px 0 20px;
}

.slidePanel {
position:absolute;
left:0;
top:0;
width:760px;
z-index:900;
background:grey;
-webkit-transition:left .5s ease-in-out;
-moz-transition:left .5s ease-in-out;
-o-transition:left .5s ease-in-out;
padding:60px 20px 20px;
}

.prevPanel {
left:-800px;
}

.currentPanel {
z-index:1000;
display:block;
}

.nextPanel {
left:800px;
}

div.sliding {
left:0;
}

div.slidingOffLeft {
left:-840px;
}

div.slidingOffRight {
left:840px;
}

<div id="controls">
        <a href="prev">Prev</a> <a href="next">Next</a>
    </div>

    <div id="container">
        <div class="prevPanel slidePanel">
            <!-- content here -->
        </div>

        <div class="currentPanel slidePanel">
            <!-- content here -->
        </div>

        <div class="nextPanel slidePanel">
            <!-- content here -->
        </div>
    </div>

$('a[href="next"]').click(function(i) {
        i.preventDefault();
        $('.prevPanel').remove();
        $('.currentPanel').css({
            "margin-top": "-" + $(window).scrollTop() + "px"
        });
        $(window).scrollTop(0);
        $('.currentPanel').addClass('slidingOffLeft').delay(500).removeClass('slidingOffLeft currentPanel').addClass('prevPanel');
        $('.nextPanel').addClass('sliding').delay(500).removeClass('sliding nextPanel').addClass('currentPanel');
        setTimeout(function() {
            $('#container').height($('.currentPanel').height());
            $('.prevPanel').css({
                'margin-top': '0px'
            });
        }, 500)

        })

このメソッドはデスクトップ ブラウザーでは完全に機能しますが、iPad では負のマージンと $(window).scrollTop(0) の追加がすぐには行われないため、記事が引き戻される前にウィンドウが一番上にスクロールするときにわずかなブリップが表示されます。位置に上げます。

これら 2 つのイベントを iOS で同時に発生させる方法や、パフォーマンスを向上させる別の方法についてアドバイスをいただければ幸いです。

注:私の例では、「前へ」ボタンと「次へ」ボタンをクリックするとページがジャンプします。これは既知の iOS 固定位置バグですが、最終バージョンはジェスチャー制御になるため、このプロジェクトでは問題になりません。

4

1 に答える 1

0

おっと..だから私はあなたのコードを見て、かなり混乱しました..それはかなり複雑に見えます:D たくさんのクラスがオンとオフを切り替えています..どうにかしてこのことをこのように解決します..(私は疲れているという警告だから私はある種の擬似コードを使用します:))

DIV 1 with overflow hidden and fixed bounds
 DIV 2 which will be as wide as sum of widths of all panels
  PANEL 1 fixed width height and so on..
  PANEL 2
  .....
  PANEL N
 2 VID :)
1 VID

DIV 2次に、CSS TRANSFORM をこのように適用できます

CSS:
DIV 2
  -webkit-transntion:  left 500ms;
  // in case you will be faced with flickering while the transition going on try using this - should help
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;

次に、JSでこのようなものを持つことができます

 onTouchForwardButton
     offset = DIV_2.left - currPanel.next().width()
     DIV_2.css(left, offset);

繰り返します..全身をスクロールしない場合は、scrollTop関数を避けることができます..または、遷移コールバックに延期できます..webkitTransitionEndイベントで処理できます。しかし、この状況では、すべてのパネル要素のみをスクロールする方がはるかに理にかなっていると思います。したがって、結局のところ、この方法で実行しようとすると、scrollTop関数を使用しても動作が改善される可能性があります..コードでこれらの遅延とタイムアウトの問題が発生する可能性があると思います..

繰り返しますが、この厄介な疑似コードで申し訳ありませんが、括弧などを書くのが面倒です..明日はこれを改善して、答えを書き直すことができます..

幸運を！

于 2012-08-01T20:44:46.713 に答える