Google リーダーを使用して「拡張」ビューで RSS エントリを閲覧している場合、div の特定の割合が画面に表示されると、エントリは自動的に「既読」としてマークされますGoogleリーダー）。そのため、1 行ずつ下にスクロールすると、JavaScript コードは、a) エントリが表示されているウィンドウにレンダリングされていること、b) 一定量が表示されていること、およびこれらの条件が満たされると、状態が読み取りに切り替えられることを判断できます。 .
その機能がどのように実装されているか知っている人はいますか? 具体的には、div がスクロールして表示されているかどうか、div のどれだけが表示されているかを知る方法を知っている人はいますか?
余談ですが、私はjQueryを使用しているので、誰かがjQuery固有の例を持っていれば、非常に感謝しています.
本当の秘訣は、スクロールバーがアイテムを含む要素のどこにあるかを追跡することです。これは、私がかつてそれを行うために作成したコードです: http://pastebin.com/f4a329cd9
スクロールするとフォーカスが変わることがわかります。各フォーカス変更を処理する関数にハンドラー コードを追加するだけです。両方向へのスクロールと、スクロールバーを右クリックしても機能しますが、単純なマウス トラッキングでは得られません (ただし、この場合、サンプル要素はすべて同じサイズで同じテキストを使用しているため、それを伝えるのは困難です)。実際にスクロールしました）。もう 1 つの問題は、コンテナが底を打ったときにどうするかです。私が今持っている解決策はFFでしか機能しません。IE で見栄えを良くしたい場合は、コードでコメントアウトしたような、背景に溶け込むダミー要素を使用する必要があります。
同じものが必要なため、これに出くわしました。非常に便利に見えます。
domとjavascriptを使用すると、親からの要素オフセットを計算できます。ウィンドウからのオフセットを計算するには、再帰を使用して一番上のウィンドウに移動し、それをウィンドウのサイズと比較する必要があります。クロスブラウザの問題とiframeのために、より複雑になります。
私の知る限り、プロトタイプviewportOffsetはほとんどの作業を行う簡単な方法を提供します。getOffsetParentおよびのソースを確認することもできますscrollTo。jqueryについてはわかりませんが、同様のメソッドを提供することを期待しています。
私の推測では、グーグルリーダーのスクリプトは、おそらく1秒間に数回、またはスクロールイベントに応答して、単にタイムアウトで実行されます。どちらの場合も、適応性があり（タイムアウトはユーザーのスクロール速度に応じて変化するなど）、リソースを大量に消費しないように十分に賢い（つまり、すべてのdivをチェックするだけではいけない）と確信しています。ドキュメント）
私の経験では、マウスオーバーまたはクリックした場合にのみ、Reader が何かを既読としてマークしたことがあります。スクロールするときにマウスがdivの上にあると仮定すると（スクロールするときにマウスを画面の右端に置く傾向があります）、特定の％が表示されたときにのみマークが付けられるという外観を説明できます。
ただし、私は間違っている可能性があります（おそらく間違っている可能性があります）。リーダーでアイテムをスクロールするだけでは、アイテムがマークされないことを知っています。マウスがスクロールするときにマウスがそれらの上にあることを確認する必要があります。