Kiểm soát hành vi cuộn trong React Beautiful DND: Tùy chỉnh tốc độ và vùng kích hoạt

React Beautiful DND là một thư viện kéo-thả React chất lượng cao do đội ngũ Atlassian phát triển, mang lại trải nghiệm tương tác mượt mà và nhiều tùy chọn tùy chỉnh, được sử dụng rộng rãi để tạo các danh sách có thể kéo-thả và các chức năng kéo-thả khác. Bài viết này sẽ đi sâu vào cách tùy chỉnh hành vi cuộn tự động của thư viện, bao gồm việc điều chỉnh tốc độ cuộn và vùng kích hoạt, giúp nhà phát triển tạo ra trải nghiệm kéo-thả phù hợp hơn với nhu cầu người dùng.

Cơ chế cuộn tự động: Hành vi mặc định và Nguyên lý hoạt động

React Beautiful DND có cơ chế cuộn tự động thông minh, khi người dùng kéo một phần tử gần với cạnh của container, hệ thống sẽ tự động cuộn container để tạo không gian. Tính năng này áp dụng cho cả cửa sổ (`window`) và các container `` có thể cuộn, hỗ trợ ba loại đầu vào: chuột, cảm ứng và bàn phím.

Logic cuộn cốt lõi

Hành vi cuộn tự động được thực hiện chủ yếu trong các tệp quản lý trạng thái của dự án:

• Định nghĩa loại cuộn: src/state/auto-scroller/auto-scroller-types.js
• Lên lịch trình cuộn: src/state/auto-scroller/index.js
• Thuật toán cuộn: src/state/auto-scroller/fluid-scroller/

Hệ thống sử dụng hai chế độ cuộn:

• Cuộn mượt (Fluid Scroll): Tạo trải nghiệm cuộn tự nhiên thông qua gia tốc tăng dần.
• Cuộn nhảy (Jump Scroll): Đặt nhanh vị trí đến mục tiêu, phù hợp với điều hướng bằng bàn phím.

Tùy chỉnh tốc độ cuộn: Điều chỉnh gia tốc và hệ số giảm xóc

Logic điều khiển tốc độ cuộn tập trung trong tệp cấu hình cuộn mượt, bằng cách sửa đổi các tham số chính, bạn có thể tùy chỉnh tốc độ.

Tham số cấu hình cốt lõi

Trong src/state/auto-scroller/fluid-scroller/config.js, các giá trị chính ảnh hưởng đến cảm giác khi cuộn được định nghĩa:

• ngưỡngKíchHoạtCuộn: Phần trăm vùng lề kích hoạt cuộn (mặc định 5%).
• tốcĐộTốiĐa: Tốc độ cuộn tối đa (pixel/giây).
• hệSốGiaTốc: Hệ số gia tốc.
• thờiGianGiảmXóc: Thời gian giảm xóc tốc độ (mili giây).

Ví dụ điều chỉnh

Nếu bạn muốn giảm độ nhạy của cuộn (tăng vùng kích hoạt), hãy sửa đổi phần trăm khoảng cách lề:

// Cấu hình gốc
export const ngưỡngKíchHoạtCuộn = 0.05; // 5%

// Sửa đổi thành
export const ngưỡngKíchHoạtCuộn = 0.1; // 10%

Tùy chỉnh vùng kích hoạt: Kiểm soát chính xác điều kiện khởi động cuộn

Vùng kích hoạt quyết định khoảng cách mà một phần tử kéo cần đến gần lề để bắt đầu cuộn. Hệ thống mặc định sử dụng phần trăm kích thước container làm cơ sở để đảm bảo tính nhất quán trên các container có kích thước khác nhau.

Triển khai logic kích hoạt

Logic tính toán vùng kích hoạt nằm trong src/state/auto-scroller/fluid-scroller/get-percentage.js. Mã cốt lõi sẽ phát hiện khoảng cách từ tâm của phần tử kéo đến các cạnh của container và chuyển đổi thành giá trị phần trăm:

// Logic đơn giản hóa
const khoảngCáchTừLề = Math.min(khoảngCáchĐếnĐỉnh, khoảngCáchĐếnĐáy);
const phầnTrăm = khoảngCáchTừLề / kíchThướcContainer;

Tùy chỉnh ngưỡng kích hoạt

Bằng cách điều chỉnh cách tính toán khoảng cách, bạn có thể thực hiện các điều kiện kích hoạt tùy chỉnh:

• Kích hoạt theo pixel cố định: Thay đổi phần trăm thành giá trị pixel cố định.
• Ngưỡng động: Điều chỉnh ngưỡng dựa trên kích thước container.
• Ưu tiên theo hướng: Sử dụng các ngưỡng khác nhau cho cuộn dọc và ngang.

Kịch bản nâng cao: Xử lý các yêu cầu cuộn đặc biệt

Đồng bộ cuộn giữa nhiều danh sách

Trong các kịch bản như bảng kanban với nhiều danh sách, cuộn tự động cần được đồng bộ giữa các danh sách. Hệ thống thực hiện việc này thông qua src/state/auto-scroller/fluid-scroller/get-best-scrollable-droppable.js để chọn container cuộn tốt nhất, đảm bảo trải nghiệm người dùng liền mạch.

Xử lý các phần tử có kích thước lớn

Khi phần tử kéo có kích thước lớn hơn container, hệ thống sẽ tự động vô hiệu hóa cuộn theo trục tương ứng (src/state/auto-scroller/can-scroll.js). Bạn có thể ghi đè phương thức `canScroll` để bỏ qua giới hạn này và đáp ứng các yêu cầu đặc biệt.

Tối ưu hóa tương thích iOS

Trên thiết bị iOS, có thể xảy ra vấn đề rung lắc khi cuộn, đây là lỗi đã biết của engine WebKit. Mặc dù không thể khắc phục hoàn toàn, bạn có thể giảm thiểu độ rung bằng cách giảm gia tốc cuộn (điều chỉnh `hệSốGiaTốc`).

Công cụ gỡ lỗi và kiểm thử

Để giúp nhà phát triển gỡ lỗi hành vi cuộn, dự án cung cấp các middleware gỡ lỗi:

• src/debug/middleware/action-timing.js: Ghi lại thời gian thực thi các thao tác liên quan đến cuộn.
• src/debug/middleware/log.js: Xuất nhật ký trạng thái cuộn.

Bằng cách sử dụng các công cụ này, bạn có thể phân tích chính xác các điểm nghẽn hiệu suất và tối ưu hóa các tham số tùy chỉnh.

Tóm tắt và Thực hành tốt nhất

Khi tùy chỉnh hành vi cuộn của React Beautiful DND, bạn nên:

1. Trước tiên, hiểu hành vi mặc định thông qua tài liệu chính thức docs/guides/auto-scrolling.md.
2. Bắt đầu bằng cách điều chỉnh các tệp cấu hình, tránh sửa đổi trực tiếp thuật toán cốt lõi.
3. Kiểm tra riêng cho từng loại thiết bị đầu vào (chuột/cảm ứng/bàn phím).
4. Chú ý xử lý các phần tử lớn và các trường hợp biên.

Bằng cách tùy chỉnh hợp lý các tham số cuộn, bạn có thể cải thiện đáng kể trải nghiệm kéo-thả, làm cho ứng dụng phù hợp hơn với trực giác và thói quen sử dụng của người dùng.