Test scrollbar visible false positive

Question

I want to test if the document is NOT scrollable, by using

$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

But there is no visible scroll bar in the window. Not sure why it's not working. I also tried this, but no luck.

Put in more context here:

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

Answer 1

The problem is the condition in the following line

const noscroll = $el.clientHeight === $el.scrollHeight << -- this line will only return true if both the client height and scroll height are the same.

You need to check if scroll height is less than or equal to client height

Sometimes rubber duck debugging might help

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