react-component / react-component/util

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

Open
#452 0 comments 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.