How do I detect whether a scrollbar exists?

Question

I need some code which continuously detects for a scrollbar. If a scrollbar is found, add an additional 50px to an iframe's height, then re-run the code again so eventually there will be no scrollbar. My current code, however, doesn't work. How would I do this in HTML/CSS/JS?

Page Code:

<script>
iframeheight()

function iframeheight() {
    alert('running');
var vs = window.innerWidth > document.documentElement.clientWidth;
    if vs > 0 {
    document.getElementById('maincode').style.height = currentheight + "50px";
    }
    else {}
    setTimeout(iframeheight, 1);
}
</script>

<iframe id="maincode" class="maincode" src="index2.html" frameBorder="0" border="0" 
onclick="iframeheight()"></iframe>

Compare `document.documentElement.clientHeight` and `document.documentElement.scrollHeight` — yunzen, May 28 '20 at 10:19
Cant you achive your purpose by setting height to maximum and hide the overflow through css? — kirb, May 28 '20 at 10:21
The reason for not just setting scroll bar width or hiding it is because I’m trying a different method of resizing an iframe. Normally you run into JS cross domain issues, but using some code like this you shouldn’t. — Evan McGregor, May 30 '20 at 08:10

yunzen · Accepted Answer · 2020-05-28T10:50:04.767

This is my solution

The key is to use clientHeight and scrollHeight on the document.documentElement
If the page has a scrollbar, the scrollHeight will be bigger than the clientHeight

Also I did not use setTimeout or setInterval (polling) but created an eventListener for the resize event and a MutationObserver on the full document. This may or may not suit your needs. Be aware that MutationObserver may have a significant impact on performance, depending on the situation. See the link in my code for further information about that.

"use strict";
{
  
  const hasScrollbar = (el) => {
    return el.scrollHeight > el.clientHeight
  }

  const checkScrollbar = () => {
    scrollbar = hasScrollbar(document.documentElement)
    viewUpdate()
  }
  
  let scrollbar;
  
  const viewUpdate = () => {
    if (scrollbar) {
      document.documentElement.style.backgroundColor = 'gold';    
    } else {
      document.documentElement.style.backgroundColor = 'silver';          
    }
  }

  window.addEventListener('resize', checkScrollbar)

  // be aware that MutationObserver may have performance issues
  // See https://stackoverflow.com/a/39332340/476951
  const observer = new MutationObserver(checkScrollbar);
  const config = { attributes: true, childList: true, subtree: true };
  observer.observe(document.documentElement, config);

  
  // For demonstration purpose
  const addContent = () => {
    document.body.appendChild(document.createElement('p'));
  }
  document.getElementById('btn-add').addEventListener('click', addContent)

  const removeContent = () => {
    document.body.removeChild(document.body.querySelector('p'));
  }
  document.getElementById('btn-remove').addEventListener('click', removeContent)
  
}

p {
  height: 100px;
  background-color: red;
}
p:nth-child(2n) {
  background-color: green;
}

<button id="btn-add">Add</button>
<button id="btn-remove">Remove</button>

Thanks for your detailed answer, however I think your code resizes the page, and I need some code to resize an iframe. How do I modify your code to do this? — Evan McGregor, May 30 '20 at 11:31

How do I detect whether a scrollbar exists?

1 Answers1