web-dev-qa-db-ja.com

それぞれのgetBoundingClientRect：undefinedは関数ではありません

そのため、フルスクリーンセクションがビューポートにあるときにいくつかの関数を呼び出そうとしています。私は7つのセクションがあり、特定のセクションがビューポート内にあるときに何かをしたいとしますビューポートに表示されるセクション）。

ここにフィドルがあります： http://jsfiddle.net/h7Hb7/2/

function isInViewport() {
    $("section").each(function () {
        var $this = $(this),
            wHeight = $(window).height(),
            rect = $this.getBoundingClientRect(); // Error in console

        // Borrowed from http://stackoverflow.com/a/7557433/5628
        if (rect.top >= 0 && rect.bottom <= wHeight) {
            console.log($this.attr("id") + "in viewport");
        }
    });
}

$(window).scroll(function () {
    // Other functions are called inside the setTimeout function, can't remove
    clearTimeout($.data(this, "scrollTimer"));
    $.data(this, "scrollTimer", setTimeout(function () {
        isInViewport();
    }, 1200));
});

どこから探し始めればいいのかわかりませんが、それはそれぞれの機能に関係していると推測しています。問題を引き起こすのは各機能ですか？ CSSが既に読み込まれているときにスクロールで問題が発生するため、CSSの問題になることはありません。

javascriptjquerygetboundingclientrect
17
Bram Vanroy

jQueryオブジェクトにはgetBoundingClientRectメソッドがありません。HTMLElementオブジェクトを取得してから、メソッドを呼び出すか、次のようにする必要があります。

this.getBoundingClientRect();

提案として、プラグインの使用がオプションである場合、 jquery.inview プラグイン。

19
undefined

JQueryに固執し、配列[]表記法を使用できます。つまり：

var myClient = $(currentGrid)[0].getBoundingClientRect();
alert(myClient.top)
25
mustbebuilt