[Vuejs]-Test scrollbar visible false positive

by

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

Leave a comment