react-component / react-component/util
switchScrollingEffect.js 的代码是否存在问题?
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 670
- Forks
- 205
- Avg merge
- 11d 17h
- Merged PRs (30d)
- 4
Description
我不确定 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 |
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/switchScrollingEffect.js and compare its isBodyOverflowing logic with rc-portal's src/util.ts and src/useScrollLocker.tsx, especially the overflow-y and width conditions. Trace where the rc-util helper is used, then establish the intended behavior for horizontal and vertical overflow; done means the behavior is resolved and the relevant implementation or documentation is aligned.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100