Получить высоту div в afterRender () - PullRequest
Новая
       6

Получить высоту div в afterRender ()

0 голосов
/ 28 июня 2018

У меня есть функция afterRender, у которой есть прослушиватель событий, когда пользователь прокручивает страницу вниз, он добавляет фиксированный класс к элементу. Прикрепление элемента к странице создает разрыв, который заставляет все последующие элементы выглядеть так, как будто они «подпрыгивают». Моя идея состояла в том, чтобы создать пустой div, который будет иметь высоту фиксированного div и занять его место, когда произойдет событие прокрутки, чтобы убрать «прыжок».

Моя проблема в том, что когда я проверяю компонент chpCard в консоли (см. Var 'chpTarget') во время выполнения события, кажется, что элемент рендерится без ширины / высоты. Я проверил его offsetHeight, и он возвращает значение 0. Но когда я проверяю его снова, как только с ним завершит работу Lightning, я получаю offsetHeight с правильным значением. Итак, мой вопрос: как я могу получить рост? Разве AfterRender не означает, что в DOM все готово для использования? Почему он отображается как элемент высоты 0?

Это CMP: 

<lightning:card class="slds-page-header slds-page-header_object-home" aura:id="chpCard">
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
</lightning:card>

А это метод рендеринга 

afterRender: function(component, helper) {
    this.superAfterRender();

    window.addEventListener('scroll', function (event) {
        var chpTarget = component.find('chpCard');
        var wrapper = component.find('chpWrapper');

        if (event.srcElement.documentElement.scrollTop > 12) {
            $A.util.addClass(chpTarget, 'slds-is-fixed');
        } else {
            $A.util.removeClass(chpTarget, 'slds-is-fixed');
        }
    });
}

Я надеюсь, что существует некая виртуальная модель DOM, которая генерируется молнией там, где существует истинная ценность этих элементов, но я не задерживаю дыхание. : S

1 Ответ

0 голосов
/ 28 июня 2018

Разобрался. Вам нужно получить конкретный компонент и покопаться в нем, чтобы получить значение. 

component.getConcreteComponent().getElements()

вернет базовый div. Существует также метод getElement () для получения определенного элемента.

...