Как определить, есть у элемента скролл или нет?

143

06 апреля 2018, 18:05

Есть всплывающее окно у него на широком мониторе нет скролла, а на узком есть скролл.

Когда всплывает окно, я убираю скролл у body, и если у всплывающего окна есть скролл, то все выглядит нормально, но если нет, происходит содрогание за счет того, что все содержимое страницы смещается на ширину скрола:

Как узнать, есть ли у элемента скролл или нет?

Конечно, можно сравнивать высоту окна браузера с высотой содержимого всплывающего окна, но для этого придется учитывать все внутренние отступы всплывающего окна и все наружные отступы дочерних элементов. Это потребует больших усилий и скорее всего не надежный способ.

А есть какой-нибудь встроенный метод?

Answer 1

Нашел способ:

elem.clientHeight < elem.scrollHeight

scrollHeight - это высота элемента полностью.

clientHeight - это видимая "клиентская" высота элемента.

Если скролла нет, то эти две величины равны, в противном случае scrollHeight будет больше clientHeight, и выражение будет равно true, что удобно использовать в условиях.

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