javascript - 在 afterRender() 中获取 div 的高度

问题描述

我有一个 afterRender 函数，它有一个事件监听器，当用户向下滚动页面时，它将固定类添加到元素中。将元素固定到页面会创建一个间隙，使所有后续元素看起来像是“跳”了起来。我的想法是创建一个空 div，它具有固定 div 的高度，并在滚动事件发生时取代它，从而消除“跳跃”。

我的问题是，当我在事件执行时检查控制台中的 chpCard 组件（请参阅“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

标签： javascriptsalesforcesalesforce-lightning

弄清楚了。您需要获取具体组件并深入挖掘以获取价值。

component.getConcreteComponent().getElements()

将返回基本 div。还有一个 getElement() 方法可以获取特定元素。

javascript - 在 afterRender() 中获取 div 的高度

问题描述

解决方案

推荐阅读