それぞれのgetBoundingClientRect: undefinedは関数ではありません質問する

それぞれの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));
});

どこから調べ始めればよいかわかりませんが、each 関数に関係しているのではないかと思います。問題を引き起こすのは each 関数ですか? CSS がすでに読み込まれているときにスクロールすると問題が発生するため、CSS の問題ではない可能性があります。

ベストアンサー1

jQuery を使い続けて配列 [] 表記を使用することもできます。例:

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

おすすめ記事