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 уже загружен.


javascript jquery getboundingclientrect
person Bram Vanroy    schedule 04.08.2014    source источник

Ответы (2)


arrow_upward
27
arrow_downward

Объект jQuery не имеет метода getBoundingClientRect, вы должны получить объект HTMLElement, а затем вызвать метод или:

this.getBoundingClientRect();

В качестве предложения, если использование подключаемого модуля является вариантом, вы можете рассмотреть возможность использования подключаемого модуля jquery.inview.

person undefined    schedule 04.08.2014
comment
Ах, глупый я. jQuery — очень простая в использовании библиотека, но иногда она заставляет вас упускать из виду то, что находится прямо у вас под носом! Я думаю, что плагин был бы излишним, как вы думаете, он может предложить что-то большее, чем мой небольшой фрагмент? - person Bram Vanroy; 04.08.2014
comment
Я беру свои слова обратно, видимо, это может многое сделать! Мне особенно нравится, как вы можете отвязать и использовать его в сочетании с one(). Спасибо за чаевые! - person Bram Vanroy; 04.08.2014
comment
this.getBoundingClientRect() также не работает внутри for с простым Javascript. - person thednp; 22.04.2015
comment
@thednp Ничто не мешает методу getBoundingClientRect работать в цикле for. - person undefined; 22.04.2015
comment
@Vohuman да, позже я понял, что пытался получить getBoundingClientRect для значений индекса, а не для фактических элементов. Виноват - person thednp; 22.04.2015
comment
В событии прокрутки jQuery (без каких-либо циклов) это решение отлично работало, когда я использовал var el = document.querySelector('#element'); var position = el.getBoundingClientRect();. Публикация на случай, если кто-то еще столкнется с похожей, но не идентичной проблемой, которая была у ОП. - person mckenna; 03.05.2019

arrow_upward
28
arrow_downward

Вы можете придерживаться jQuery и использовать нотацию массива [], то есть:

var myClient = $(currentGrid)[0].getBoundingClientRect();
alert(myClient.top)
person mustbebuilt    schedule 20.07.2015
comment
@UnnamedSentientBeing Поскольку первым элементом объекта является HtmlElement. - person Bram Vanroy; 11.05.2018