Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
#452 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Cần làm rõ
Mức độ hoạt động
Đình trệ
Công nghệ
javascript, typescript
Lĩnh vực
frontend, web-dev

Hướng nghiên cứu

Bắt đầu với src/switchScrollingEffect.js và so sánh logic isBodyOverflowing của nó với src/util.ts và src/useScrollLocker.tsx của rc-portal, đặc biệt là các điều kiện overflow-y và width. Theo dõi nơi helper của rc-util được sử dụng, sau đó xác định hành vi dự kiến cho overflow theo chiều ngang và chiều dọc; hoàn thành khi hành vi đã được giải quyết và phần triển khai hoặc tài liệu liên quan đã được đồng bộ.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

我不确定 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
Ngôn ngữ chính
TypeScript
Star
670
Fork
205
Merge trung bình
15 ngày 17 giờ
Pull request đã merge (30 ngày)
6

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react-component/util

Tất cả issue của react-component/util

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.