Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
kabeep opened this issue Jun 16, 2023 · 0 comments
Open

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

kabeep opened this issue Jun 16, 2023 · 0 comments

Comments

@kabeep
Copy link

kabeep commented Jun 16, 2023

我不确定 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant