0

「無限スクロール」や「無限スクロール」と同様に、カスタム コールバック イベントを発生させるために、ユーザーがページの下部に到達したタイミングを特定したいと考えています。

これを行う方法に関する私の最良の理論は、最初に body 要素の高さを計算することです。

var bodyHeight = $('body').outerHeight();

次に、窓枠の高さを測ります。

var winHeight = $(window).height();

最後に、垂直スクロール位置を決定します。

var scrollY = $(window).scrollTop();

ただし、このスクリプトを本文に挿入すると、次のようになります。

<script>
console.log(bodyHeight, winHeight);
$(window).bind("scroll", function(){
console.log(winHeight + scrollY);
});
</script>

計算されたスクロール位置が本体の高さを超えていることがよくあります。「エラスティック スクロール」で OSX を使用しているときに似たようなものを見たことがありますが、これは標準のスクロールバー ui のみを使用しています。

何かご意見は？

4

1 に答える 1

0

$('body').height() に固執すれば、問題ないと思います。

$('body').height() - $(window).height() == $('body').scrollTop()

position:absolute、position:fixed、または float 要素がある場合、scrollTop() がオフになっている可能性があります。この場合、 body 要素は実際には最も背の高い要素をラップしていないため、機能しません。

その場合は、実際に scrollHeight を使用できます。

document.body.scrollHeight - $(window).height() == $('body').scrollTop()

jQuery には scrollHeight メソッド (または同等のもの) がなく、ブラウザーの互換性の問題 ( scrollHeight の W3C Dom 互換性) がいくつかあるようですが、最新のすべてのブラウザーで動作します。

最悪のシナリオでは、すべての要素を取得し、それらをループして最大の高さを見つけ、それを次の目的に使用できます。

var maxHeight = ((function() { var maxHeight = 0; $('*').each(function() {
    maxHeight = Math.max($(this).height(), maxHeight);
}); return maxHeight; })());

maxHeight - $(window).height() == $('body').scrollTop()

そのアプローチを使用する場合は、値をキャッシュして、必要な場合にのみ更新することを強くお勧めします。

JSFiddle

于 2012-12-13T03:54:12.327 に答える