Тест полоса прокрутки видна ложно положительный

Question

Я хочу проверить, можно ли прокручивать документ НЕ , используя

$el = document.documentElement
const noscroll = $el.clientHeight === $el.scrollHeight // false

console.log($el.clientHeight) // 977
console.log($el.scrollHeight) // 991
console.log($el.scrollTop) // 0

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

Поставьте здесь больше контекста:

this.getData().then(data => {
  this.$nextTick().then(() => {
    const $el = document.documentElement
    if (!this.isPageEnd && $el.clientHeight - $el.scrollTop === $el.scrollHeight) {
      this.getData()
    }
  })
 })

Answer 1

Проблема заключается в условии в следующей строке

const noscroll = $el.clientHeight === $el.scrollHeight << - эта строка будет возвращать true, только если высота клиента и высота прокрутки одинаковы. </p>

Вынеобходимо проверить, меньше ли высота прокрутки или равна высоте клиента

Иногда отладка резиновой утки может помочь

$el = document.documentElement
const hasScroll = $el.scrollHeight <= $el.clientHeight

console.log($el.clientHeight)
console.log($el.scrollHeight)
console.log(hasScroll)

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  height: 1200px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <p>A large div</p>

</div>