[讨论] 滚动容器元素获取错误，可能会导致 van-list 无法触发 onload · Issue #3823 · youzan/vant

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

测试机列表

iOS 12.3.1

vivo 手机：VivoBrowser 5.6.3.2 Android 5.1.1、VivoBrowser 5.5.1.1 Android 6.0.01

三星手机： SanmsungBrowser 5.0 Andriod 7.0

乐视手机：EUI Browser 2.9.9199 Android 6.0

锤子手机：Android 7.1.1

监听 scroll 事件

window.addEventListener('scroll', () => {
  console.log('window scroll');
});
document.documentElement.addEventListener('scroll', () => {
  console.log('html scroll');
});
document.body.addEventListener('scroll', () => {
  console.log('body scroll');
});

1. 默认场景

html, body {
  height: auto;
  overflow: auto;
2. 设置 html 滚动
html {
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
3. 设置 body 滚动
html, body {
  height: 100%;
body {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
4. 设置 html、body 都滚动 ⚠️⚠️
html, body {
  height: 100%;
  overflow-y: scroll;
body {
  -webkit-overflow-scrolling: touch;
在 场景1、场景2、场景3 都只会触发 window 的 scroll 事件，所以通过 getScrollEventTarget 获取到 window 也没什么问题
但在 场景 4 中，只会触发 body 的 scroll 事件，所以通过 getScrollEventTarget 应该返回的是 body，而现在返回的是 window，导致在组件内绑定 scroll 事件无效，进一步导致了 van-list 在滚动时，无法触发 onload 事件
同样的，如果有用户设置了类似 场景4 的样式，还需要验证下是否会导致 van-tabs、van-popup、van-index-bar、van-pull-refresh 组件也会出现类似的问题
场景 1：符合预期
场景 2：也算符合预期。根据 http://w3help.org/zh-cn/causes/SD9013 文章的内容 ，给人感觉滚动条是 window 的，而不是 html 的
场景 3：这个没想明白。感觉它和 场景2 类似，滚动条也像是 window 的。设置以下 css 后，可以发现滚动条确实像是 window 的，而不是 body 的
html {
  height: 100vh;
  margin: 0 100px;
body {
  height: 50vh;
  overflow-y: scroll;
场景 4：个人认为这个符合预期，不算是浏览器的 bug ，我比较倾向  getScrollEventTarget 兼容这种场景
感觉这个 overflow-y: scroll 和 对html与body的一些研究与理解 文章里提到的 background 属性类似，即：
当只设置 html { overflow-y: scroll } 或 只设置 body { overflow-y: scroll } 时，滚动条及 scroll 事件都是直接作用到 window 上的。只有同时设置 html, body { overflow-y: scroll } 时，body 才会拥有滚动条和事件
          @chenjiahan 貌似这个修改让新版本的 vant 在 1,  4 的情况都拿不到 window 为滚动容器，导致 sticky 没办法吸顶。

https://codesandbox.io/s/competent-cdn-i8xbm?file=/src/App.vue
我觉得应该要把 overflow 的 scroll和 auto 在 body/html 上面要分开处理，不能够用一个正则来统一确定是否为滚动容器。