测试滚动条可见误报

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，但没有运气。

在这里加入更多背景：

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。

您需要检查滚动高度是否小于或等于客户端高度

有时rubber duck debugging可能有所帮助

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