主页 / 问题 / 810001
Accepted
Igor
Asked:2020-04-05 20:37:44 +0000 UTC2020-04-05 20:37:44 +0000 UTC

如何判断一个元素是否有滚动条？

  • 772

有一个弹出窗口；在宽显示器上没有滚动，但在窄显示器上有滚动。

当窗口弹出时，我从 中删除滚动body，如果弹出窗口有滚动，那么一切看起来都很好，但如果没有，由于所有页面内容都移动到了宽度滚动：

如何知道一个元素是否有滚动条？

当然，可以将浏览器窗口的高度与弹出窗口的内容高度进行比较，但要做到这一点，您必须考虑弹出窗口的所有填充和子元素的所有填充。这将需要大量的努力，而且很可能不是一种可靠的方法。

有没有内置的方法？

javascript

2 个回答

  1. Best Answer

    找到了一个方法：

    elem.clientHeight < elem.scrollHeight

    scrollHeight是元素的全高。

    clientHeight是元素的可见“客户”高度。

    如果没有滚动，那么这两个值是相等的，否则scrollHeight会更大clientHeight，表达式等于true，方便在条件中使用。

    • 6 

  2. // Обычно используют подобие такой функции, или просто сравнение (как в возвращаемом объекте): 
function getScrollbarsVisibility(el) {
  return {
    h: el.scrollWidth  > el.clientWidth, 
    v: el.scrollHeight > el.clientHeight
  }; 
}

var content = document.getElementById('content'); 
document.getElementById('test').onclick = () => {
  let sv = getScrollbarsVisibility(content.parentElement); 
  console.clear(); 
  console.log(`Горизонтальный: ${sv.h ? '' : 'не'}видим. Вертикальный: ${sv.v ? '' : 'не'}видим.`); 
  setTimeout(console.clear, 3000); 
}; 

document.getElementById('add-h').onclick = () => { content.style.width  = '150vw'; }; 
document.getElementById('add-v').onclick = () => { content.style.height = '150vh'; }; 
    body > div { float: left; }

#block {
  width: 200px; height: 110px;
  margin: 10px 30px;
  overflow: auto; 
}

#content {
  height: 100%; 
  background: radial-gradient(at center, black 5%, black, green, #af7, green 40%, black 60%, black); 
}

button {
  display: block; 
  width: 300px; 
  margin: 10px 0;
  font: 18px sans-serif; 
}

hr { width: 50%; }
    <div>
  <button id="test">Проверить скроллбары</button>
  <hr>
  <button id="add-v">Включить вертикальный</button>
  <button id="add-h">Включить горизонтальный</button>
</div>
<div id="block"><div id="content">&nbsp;</div></div>

    似乎没有一个标准的方法。

    • 0

相关问题