react-component / util

Common Utils For React Component
util.vercel.app
MIT License
623 stars 178 forks source link

switchScrollingEffect.js 的代码是否存在问题? #452

Open kabeep opened 1 year ago

kabeep commented 1 year ago

我不确定 switchScrollingEffect 是不是存在问题,或是有其他的考量,至少看起来是存在问题的。

function isBodyOverflowing() {
  // 这里的判断需要窗口的横纵同时溢出才为 True
  return (
    document.body.scrollHeight >
      (window.innerHeight || document.documentElement.clientHeight) &&
    window.innerWidth > document.body.offsetWidth
  );
}

在其他仓库中也能找到同样的函数,例如 Portal

rc-util 的 switchScrollingEffect 似乎在 react-component/ 或 ant-design/ant-design/ 中没有被使用,并且它在 rc-util 中如果横纵有一方未溢出,无论另一方是否溢出都不会使不该被允许滚动的窗口仍允许滚动。

在 Portal 的 useScrollLocked.tsx 中,最新的代码会在任何场景下生效 overflow-y: hidden ,只有内容在窗口横纵都溢出的时候才对 body 与 html 设置 width: calc(100% - ${scrollbarSize}px)

updateCSS(
  `
html body {
  overflow-y: hidden;
  ${isOverflow ? `width: calc(100% - ${scrollbarSize}px);` : ''}
}`,
  id,
)

从结果上来看似乎 Portal 的代码不需要判断盒子容器中的水平内容溢出?毕竟没有同样的设置 height 属性的值。 rc-util 这段代码看起来很久没更新了,同时阅读 antd 和 rc 的多个仓库代码时比较容易有歧义。

Environment Info
rc-util 5.30.0
rc-portal 1.1.1