I want to get a height of a class in salesforce lightning.


Output showing {} How can i retrieve dom and get the height of that?

Lightning framework allows to use methods of document object. The only thing, it does it vie SecuredDocument. You can check methods that can be called from Locker API from this documentation

so, to get scrollHeight of div element you can do the following:


<aura:component >
        <div class="container">
            <div class="content">Some content..</div>
    <lightning:button label="Get Scroll Height" onclick="{!c.getScrollHeight}"/>


.THIS .content{
    height: 800px;
    width: 2000px;
    padding: 10px;
    background-color: coral;

.THIS .container{
    margin-top: 10px;
    height: 250px;
    width: 250px;
    overflow: auto;


    getScrollHeight : function(cmp, event, helper) {
        var contents = document.getElementsByClassName("container");
        for (var i=0; i<contents.length; i++) {
            console.log("scroll height is:" + contents[i].scrollHeight);

so, once you click Get Scroll Height button, browser console prints 820 - got scroll height of div.

enter image description here

  • Thanks for your suggestion. I've tried exact code but its returning me "contents "[]" " var contents = document.getElementsByClassName("container") console.log("contents "+ JSON.stringify(contents)); Output contents "[]" – Subhasis Giri Sep 19 at 4:58
  • @SubhasisGiri try console.log("contents ", contents); and you will see that debug outputs Proxy object. If you want to read more how to debug correctly proxy objects you can read these: q1, q2. q3 – Oleksandr Berehovskiy Sep 19 at 5:58
  • @SubhasisGiri and Secure Wrappers for Global References – Oleksandr Berehovskiy Sep 19 at 5:59

You may use component.find to get the element.

var div = component.find('scroll_container');

And get the scroll height like so:


This answer may help -> https://salesforce.stackexchange.com/a/190154/39652.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.