问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

ant-design-vue的select的popupScroll事件在判断是否滚动触底的时候，会存在不同分辨率有不同误差的情况，怎么解决？

头像
0qbwycuw
    271426

    image.png

    const hanldeScrollFundN = debounce((val: any) => {
  const {
    target: { scrollHeight, scrollTop, clientHeight },
  } = val || {}
  const scrollH = scrollHeight - scrollTop
  const clientH = clientHeight
  console.log('相减:', scrollH, clientH)
  if (scrollH - clientH < 100) {
    // 原先设置的是 scrollH - clientH = 0表示滚动到底，因为有误差给了100
    if (pageParams.pageNum < pages.value) {
      pageParams.pageNum++
      handleFundNOpt(searchVal.value)
    }
  }else { 
    console.log('没滚到底')
  }
}, 500)

    原先设置的是 scrollH - clientH = 0表示滚动到底，因为有误差给了100，但是发现不同分辨率的误差还不同，有些误差能达到131，这个误差值就很不到给了，有什么办法能精确判断滚动条是否触底吗？

    javascript前端vue.jsant-design-vue
    阅读 874
    avatarAI BotBETA

    你可以使用Intersection Observer API来精确判断滚动条是否触底。Intersection Observer API 用于观察目标元素与其祖先元素或视窗的交叉状态。它可以帮助我们检测一个元素是否完全出现在视窗内，或者是否从视窗中完全消失。使用这个API，我们可以精确地确定滚动条是否到底部。

    以下是如何使用Intersection Observer API 来判断滚动条是否触底的示例代码：

    let isScrollBottom = false;

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      isScrollBottom = false;
    } else {
      isScrollBottom = true;
    }
  });
}, {threshold: 0});

observer.observe(document.querySelector('body'));

if (isScrollBottom) {
  console.log('滚到底部');
} else {
  console.log('未滚到底部');
}

    在这个代码中，我们创建了一个新的 Intersection Observer 对象，它会观察页面的滚动条是否与视窗交叉。如果元素（在这种情况下是整个body）完全出现在视窗内（即未被遮挡），isIntersecting 属性为 true；如果元素完全不在视窗内（即被遮挡），isIntersecting 属性为 false。我们可以通过检查这个属性来确定滚动条是否到底部。

    使用这种方法，无论分辨率如何，都可以提供一个相对精确的滚动条到底部的判断。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题