代码之家 › 专栏 › 技术社区 › Mengo

测试滚动条可见假阳性

google-chrome html

Mengo · 技术社区 · 7 年前

不是可滚动,使用

$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()
    }
  })
 })

1 回复 | 直到 7 年前

-1

karthickj25 7 年前

问题是下一行的状况

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>

推荐文章

user3425506 · 没有互联网连接无法获得PWA

1 年前

sunics · jQuery在ul中查找li元素

2 年前

Marlon · 在Navigationextras中传递大数据router.navigation Angular 16导致Firefox错误

2 年前

Curious66 · 如何在谷歌会议中捕获传入的音频流

2 年前

Tricotou · $.get(code_url)执行返回的代码,不使用eval(),也不将其附加到DOM。jQuery安全性失败?

2 年前

ÙØÙØ¯ Ø§ÙÙÙ · 使用sendMessage功能时从Chrome扩展程序获取数据的延迟

2 年前

Patrick Potocny · Next.js 14草稿模式在iframe中不起作用(无头CMS预览)

2 年前

Vrushabh Ranpariya · 谷歌Chrome-开发工具-网络选项卡:设计更新

2 年前

Johnny Chen · 相同的字体在chrome和firefox中的显示方式不同

2 年前

Alexander Mills · Flutter不将Chrome识别为“web”,反之亦然

2 年前