Как определить есть ли полоса прокрутки у div'a?

360

02 июля 2017, 16:34

На разных страницах есть один и тот же блок фиксированной высоты. К примеру:

.some_class {
  height: 300px;
  overflow-y: auto;
}

На каждой странице в данном блоке разное количество контента, по-этому в одном случае полоса прокрутки появляется, а в другом нет.

Вопрос: можно ли определить на JS, что блок имеет полосу прокрутки на определенной странице или не имеет? Если да, то как?

Answer 1

Вариант 1. Использовать два значения: высоту элемента и высоту прокрутки

document.querySelector('button').onclick = (function() { 
  var e = document.querySelector('.a'); 
 
  if(e.clientHeight === e.scrollHeight)  
    console.log('Полосы нет!')  
  else  
    console.log('Полоса есть!') 
});

.a { 
  width: 200px; 
  height: 200px; 
  overflow: auto; 
  border: 2px solid red; 
} 
.a-b { 
  width: 100px; 
  height: 800px; 
} 
input:checked ~ .a > .a-b { 
  display: none; 
}

Убрать div: <input type="checkbox"> 
 
<div class="a"> 
  <div class="a-b"></div> 
</div> 
 
<button>Определить</button>

Вариант 2. Создать вокруг ещё один элемент и измерять относительно его высоты

document.querySelector('button').onclick = (function() { 
  var e = document.querySelector('.a'), 
      e_h = document.querySelector('.a2'); 
 
  if(e.clientHeight < e_h.clientHeight)  
    console.log('Полоса есть!') 
  else  
    console.log('Полосы нет!')  
});

.a { 
  width: 200px; 
  height: 200px; 
  overflow: auto; 
  border: 2px solid red; 
} 
.a-b { 
  width: 100px; 
  height: 800px; 
} 
input:checked ~ .a .a-b { 
  display: none; 
}

Убрать div: <input type="checkbox"> 
 
<div class="a"> 
  <div class="a2"> 
    <div class="a-b"></div> 
  </div> 
</div> 
 
<button>Определить</button>