useInfiniteScroll 的getScrollTop方法问题

[LJJCherry]

const scrollMethod = () => {
    let el = getTargetElement(target);
    if (!el) {
      return;
    }

    el = el === document ? document.documentElement : el;

    const scrollTop = getScrollTop(el);
    const scrollHeight = getScrollHeight(el);
    const clientHeight = getClientHeight(el);

    if (scrollHeight - scrollTop <= clientHeight + threshold) {
      loadMore();
    }
  };
const getScrollTop = (el: Document | Element) => {
  if (el === document || el === document.body) {
    return Math.max(
      window.pageYOffset,
      document.documentElement.scrollTop,
      document.body.scrollTop,
    );
  }
  return (el as Element).scrollTop;
}

相关代码链接：

hooks/packages/hooks/src/useInfiniteScroll/index.tsx

Line 90 in 6579130

const scrollMethod = () => {

导致el = document的时候，在某些安卓浏览器里面没有获取到scrollTop，getScrollTop应该改成

const getScrollTop = (el: Document | Element) => {
  if (el === document.documentElement || el === document.body) {
    return Math.max(
      window.pageYOffset,
      document.documentElement.scrollTop,
      document.body.scrollTop,
    );
  }
  return (el as Element).scrollTop;
}

[hchlq]

不能直接这么改，会有 break change，应该是安卓浏览器不兼容的问题吗？

[hchlq]

安卓浏览器命中了 el === document 的时候，这三个没有一个是有值的吗

window.pageYOffset
document.documentElement.scrollTop
document.body.scrollTop,

[LJJCherry]

安卓浏览器命中了 el === document 的时候，这三个没有一个是有值的吗

window.pageYOffset
document.documentElement.scrollTop
document.body.scrollTop,

现在的代码当el等于document的时候走不到这个逻辑啊，在外面 el = el === document ? document.documentElement : el;
el被赋值为document.documentElement了，现在安卓的现象是

[hchlq]

应该是安卓下面的 document.documentElement.scrollTop 不兼容，是否可以换 el，之前修复的参考 #2119

[LJJCherry]

应该是安卓下面的 document.documentElement.scrollTop 不兼容，是否可以换 el，之前修复的参考 #2119

我的el用的就是document的，是因为ahooks里面这个逻辑导致的安卓有问题

[hchlq]

正常情况下 document.documentElement.scrollTop 是有值的，是不是你所在的浏览器不兼容。可以看看上面提到之前修复一个问题的上下文

[hchlq]

问题上下文大概是，下面这段逻辑有问题，如果是 document，让其走 document.documentElement，不让进入这个分支

  if (el === document || el === document.body) {
    return Math.max(
      window.pageYOffset,
      document.documentElement.scrollTop,
      document.body.scrollTop,
    );
  }

[LJJCherry]

正常情况下 document.documentElement.scrollTop 是有值的，是不是你所在的浏览器不兼容。可以看看上面提到之前修复一个问题的上下文

目前的我们这边传的el是document的，3.7.8版本的ahooks，所有的安卓手机都无法自动实现滚动加载更多，我去看下你说的那个问题，我们目前只能锁死在3.7.5的版本，

就是这次改动

[LJJCherry]

问题上下文大概是，下面这段逻辑有问题，如果是 document，让其走 document.documentElement，不让进入这个分支

  if (el === document || el === document.body) {
    return Math.max(
      window.pageYOffset,
      document.documentElement.scrollTop,
      document.body.scrollTop,
    );
  }

我看你提到的那个修复，是修复的getClientHeight的问题，但那个改动影响了document 的 getScrollTop的获取，

[LJJCherry]

应该是安卓下面的 document.documentElement.scrollTop 不兼容，是否可以换 el，之前修复的参考 #2119

el 应该换啥呢？本身 el 就是document，整个页面滚动到底部触发自动加载更多啊，呜呜呜～我其实尝试过用document.body，但 getClientheight又不对了

[hchlq]

不兼容这种情况比较少见，可能是安卓不兼容，你可以按照下面的方案来，应该是没问题的

  const el = useMemo(() => {
    const doc = document.documentElement;
    Reflect.defineProperty(doc, 'scrollTop', {
      get() {
        return Math.max(
          window.pageYOffset,
          document.documentElement.scrollTop,
          document.body.scrollTop,
        );
      },
    });
    Reflect.defineProperty(doc, 'scrollHeight', {
      get() {
        return document.documentElement.scrollHeight;
      },
    });
    Reflect.defineProperty(doc, 'clientHeight', {
      get() {
        return document.documentElement.clientHeight;
      },
    });

    return doc;
  }, []);

[LJJCherry]

我其实没有理解getClientHeight获取的有问题，为什么要更改getScrollTop兼容方法的获取逻辑？

[hchlq]

两者不可兼得吧，绝大部分都是兼容的，document.documentElement.scrollTop 不兼容的情况很少看见

[LJJCherry]

两者不可兼得吧，绝大部分都是兼容的，document.documentElement.scrollTop 不兼容的情况很少看见

不能把这个逻辑移到getClientHeight里面吗？

[hchlq]

可以是可以，不过会出现获取一些信息元素不一致的情况，可能会存在其他场景的 badcase

[LJJCherry]

getScrollTop 这个方法我搜了一下只有 useInfiniteScroll 这个hook在用，目前 badcase 就在眼前啊，如果有demo的话可以试试安卓机

[hchlq]

其他场景指的是 document 获取 scrollTop 和 clientHeight 不一致的情况，不是指被引用情况

[hchlq]

想了一下，应该需要处理一下，可否来个 PR

[hchlq]

如果没时间提 PR 的话说下哈，后续我处理一下

[LJJCherry]

我提一个 PR 吧,#2285

[hchlq]

这个方法可以解决你的问题吗

  const el = useMemo(() => {
    const doc = document.documentElement;
    Reflect.defineProperty(doc, 'scrollTop', {
      get() {
        return Math.max(
          window.pageYOffset,
          document.documentElement.scrollTop,
          document.body.scrollTop,
        );
      },
    });
    Reflect.defineProperty(doc, 'scrollHeight', {
      get() {
        return document.documentElement.scrollHeight;
      },
    });
    Reflect.defineProperty(doc, 'clientHeight', {
      get() {
        return document.documentElement.clientHeight;
      },
    });

    return doc;
  }, []);

[LJJCherry]

这个方法可以解决你的问题吗

  const el = useMemo(() => {
    const doc = document.documentElement;
    Reflect.defineProperty(doc, 'scrollTop', {
      get() {
        return Math.max(
          window.pageYOffset,
          document.documentElement.scrollTop,
          document.body.scrollTop,
        );
      },
    });
    Reflect.defineProperty(doc, 'scrollHeight', {
      get() {
        return document.documentElement.scrollHeight;
      },
    });
    Reflect.defineProperty(doc, 'clientHeight', {
      get() {
        return document.documentElement.clientHeight;
      },
    });

    return doc;
  }, []);

不太行？

[hchlq]

@LJJCherry 改成这样即可

  const el = useMemo(() => {
    const doc = document.documentElement;
    Reflect.defineProperty(doc, 'scrollTop', {
      get() {
        return Math.max(
          window.pageYOffset,
          document.body.scrollTop,
        );
      },
    });
    Reflect.defineProperty(doc, 'scrollHeight', {
      get() {
        return document.documentElement.scrollHeight;
      },
    });
    Reflect.defineProperty(doc, 'clientHeight', {
      get() {
        return document.documentElement.clientHeight;
      },
    });

    return doc;
  }, []);

[LJJCherry]

也还是不行，下面这行代码会报Maximum call stack size exceeded，屏蔽掉这个， 下面clineHeight也会报这个错，把这俩都屏蔽掉，不报错了，页面也无法滚动加载更多了

Reflect.defineProperty(doc, 'scrollHeight', {
      get() {
        return document.documentElement.scrollHeight;
      },
    });

[hchlq]

把 document.documentElement.scrollHeight 和 document.documentElement.clientHeight 处理一下呢，提升一下，因为递归读取死循环了

[LJJCherry]

把 document.documentElement.scrollHeight 和 document.documentElement.clientHeight 处理一下呢，提升一下，因为递归读取死循环了

放弃，我直接先写死了3.7.5的版本号