スクロール可能な領域内のdivの表示されている高さを取得する必要があります。私は自分自身をjQueryでかなりまともだと思っていますが、これは完全に私を失望させています。
黒のラッパー内に赤のdivがあるとしましょう:
上の図では、jQuery関数はdivの表示部分である248を返します。
上の図のように、ユーザーがdivの上部を超えてスクロールすると、296が報告されます。
これで、ユーザーがdivを超えてスクロールすると、再び248が報告されます。
明らかに、私の番号はこのデモのように一貫性があり明確ではないか、またはそれらの番号をハードコーディングするだけです。
私には少し理論があります:
- ウィンドウの高さを取得します
- divの高さを取得します
- ウィンドウの上部からdivの初期オフセットを取得します
- ユーザーがスクロールするときにオフセットを取得します。
- オフセットが正の場合、divの上部がまだ表示されていることを意味します。
- 負の場合、divの上部がウィンドウによって隠されています。この時点で、divがウィンドウの高さ全体を占めるか、divの下部が表示されている可能性があります。
- divの下部が表示されている場合は、divとウィンドウの下部との間のギャップを把握します。
とてもシンプルに見えますが、頭を包むことができません。明日の朝、またひびを入れます。私はちょうどあなたの天才の何人かが助けることができるかもしれないと思いました。
ありがとう!
更新:私はこれを自分で理解しましたが、以下の答えの1つがよりエレガントであるように見えるので、代わりにそれを使用します。好奇心旺盛な方のために、私が思いついたものは次のとおりです。
$(document).ready(function() {
var windowHeight = $(window).height();
var overviewHeight = $("#overview").height();
var overviewStaticTop = $("#overview").offset().top;
var overviewScrollTop = overviewStaticTop - $(window).scrollTop();
var overviewStaticBottom = overviewStaticTop + $("#overview").height();
var overviewScrollBottom = windowHeight - (overviewStaticBottom - $(window).scrollTop());
var visibleArea;
if ((overviewHeight + overviewScrollTop) < windowHeight) {
// alert("bottom is showing!");
visibleArea = windowHeight - overviewScrollBottom;
// alert(visibleArea);
} else {
if (overviewScrollTop < 0) {
// alert("is full height");
visibleArea = windowHeight;
// alert(visibleArea);
} else {
// alert("top is showing");
visibleArea = windowHeight - overviewScrollTop;
// alert(visibleArea);
}
}
});