[youzan/vant]List组件与overflow-x造成的无限加载

2024-05-22 833 views
8

当使用vant-list时,如果在父级DOM上设置了overflow-xauto, hidden, scroll就会产生这种bug。 表现为如果父级DOM内除了vant-list以外没有内容,则不会触发load。 有其他内容则会无限触发load。 具体看下面的jsfiddle的重现吧。

读过源码也没想通overflow-x和这个有什么关系。。

Environment

  • Device: windows 8
  • Browser: chrome
  • Vant Version: 1.4.8

回答

8

设置 overflow-x, overflow-y 会被自动设置成 auto。 就算设置 overflow-y: visible 也没用。

这是 MDN 上的解释。 image

所以根据 list 源码的判断,你这个元素被当成了滚动容器。但是你又没设高度,导致无限滚动了。 image

7

设置 overflow-x, overflow-y 会被自动设置成 auto。 就算设置 overflow-y: visible 也没用。

这是 MDN 上的解释。 image

所以根据 list 源码的判断,你这个元素被当成了滚动容器。但是你又没设高度,导致无限滚动了。 image

谢谢解答,明白了。

5

不过这个也算是个 bug ,我晚点提个 PR 看看,应该是需要修复的

1

还是会出现这个问题

8

会无限加载 我设置了:offset="10"才好 但是我的滚动条是document.documentElement为什么不设置会无限请求加载