0

ユーザーがスクロールして特定の要素に到達したときに関数を起動して、その要素を「既読」とマークできるようにしたいと思います (現在は廃止された Google リーダーで投稿を表示した後に投稿が既読とマークされた方法を考えてみてください)。たとえば、次のようなページを想像してください。

<div id="1">Node 1</div>
<div id="2">Node 2</div>
<div id="3">Node 3</div>
<div id="4">Node 4</div>

<divs>最初の 2 つだけがビューポート内に収まると仮定すると、 Dojo のイベント リスナーを使用して、div 3 が表示されたときにイベントを発生させ、div 4 が表示されたときに再びイベントを発生させたいと考えています。(要素が読み取られたときに記録するという私の目標に加えて、これにより、無限スクロールを簡単に実装することもできます。)

jQuery Waypointsツールはまさに私が望んでいることを実行しているように見えますが、私のコードのほとんどは Dojo を使用しているため、この 1 つのタスクだけに jQuery を使用したくありません。Dojo以外のライブラリ/ツールキットに依存しない、これを行うための事前に作成されたツールまたは簡単な方法を見つけたいと思います(Dojo を使用するか、ライブラリをまったく使用しないことで問題ありません)。

更新: Skrollrも私が探していることを実行しているようですが、アニメーションのみです。つまり、ビューポートとの関係に基づいて要素をアニメーション化できます。ただし、私の目標はアニメーションではなく、要素が視点内に入ったときに関数 (Dojo を介して AJAX 呼び出しを行う) をアクティブにすることであるため、これは正確には役に立ちません。

4

1 に答える 1

0

友人からのいくつかの指摘のおかげで、私はこの質問に対する機能的な解決策をまとめることができました. すべての div が id の記事を持つ別の div 内にあると仮定すると、ユーザーが要素の下部をビューポートに少なくとも 50px スクロールすると、要素に「読み取り」クラスが適用されます。

    posts = dojo.query("#articles > div");

    dojo.connect(window, 'onscroll', function(){
        var vs = win.getBox();

        var output;
        var readCount;

        for (var i = 0; i < posts.length; i++) {
            var includeScroll = false;
            var locInfo = domGeom.position(posts[i], includeScroll)
            var fullyOnScreen = locInfo.y + locInfo.h + 50;
            if ((fullyOnScreen > 0) && (fullyOnScreen < vs.h)) {
                //Apply "read" class to div if it has been scrolled to.

                domClass.add(posts[i], "read");             
            }
            if (locInfo.y > vs.h) {
                break;
            }
        }   


    });

残りの質問:これで私の目標は解決しますが、ユーザーがスクロールするたびに、ビューポート内またはその上にあるすべての div の位置をポーリングするのが最も効率的かどうかはわかりません。スクロール イベントごとに複数回でもかまいません。これをより効率的にする方法はありますか？私の Core 2 Duo システムでは問題なく動作しているようですが、ラグがないように見えるからといって、ずさんなことはしたくありません。

起動時に一度だけ絶対トップからすべてのdivの位置を計算し、スクロールするたびにビューポートとトップを比較することを考えました。これはおそらくより効率的ですが、効率の向上がコードの複雑さの増加を正当化するかどうかはわかりません。

于 2013-07-04T19:53:48.803 に答える