Как определить, существует ли полоса прокрутки?

Question

Мне нужен код, который постоянно обнаруживает полосу прокрутки. Если полоса прокрутки найдена, добавьте дополнительные 50 пикселей к высоте iframe, затем повторно запустите код, чтобы в конечном итоге полосы прокрутки не было. Однако мой текущий код не работает. Как мне сделать это в HTML / CSS / JS?

Код страницы:

<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>

Answer 1

Это мое решение

Ключ состоит в использовании clientHeight и scrollHeight на document.documentElement
Если на странице есть полосы прокрутки scrollHeight будет больше, чем clientHeight

Также я не использовал setTimeout или setInterval (опрос), но создал eventListener для события resize и MutationObserver в полном документе. Это может соответствовать вашим потребностям, а может и не соответствовать. Имейте в виду, что MutationObserver может оказывать значительное влияние на производительность в зависимости от ситуации. См. Ссылку в моем коде для получения дополнительной информации об этом.

"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>