UI-UX Result preview has overlapping scroll areas that block inner scrolling

Location: 1DesignTool > Result preview > Mobile screen carousel

Mô tả:

Lỗi UI xảy ra sau khi 1DesignTool tạo xong result và hiển thị phần preview nhiều màn hình mobile.

Khi hover chuột vào một màn hình mobile trong vùng preview, có thể thấy scrollbar của chính màn hình đó, nhưng không scroll được nội dung bên trong màn hình mobile. Thay vào đó, chỉ vùng preview lớn bên ngoài scroll được. Điều này làm người dùng không thể xem đầy đủ nội dung của từng screen, dù UI có hiển thị scrollbar bên trong.

Vấn đề có vẻ đến từ việc nhiều scroll container đang chồng lên nhau:

• Vùng preview/result lớn có scrollbar riêng.
• Từng màn hình mobile trong carousel cũng có scrollbar riêng.
• Khi hover vào screen nhỏ, scroll event vẫn bị container lớn bắt trước.
• Hai scrollbar hiển thị gần nhau/chồng lớp, gây nhầm rằng screen nhỏ có thể scroll nhưng thực tế không nhận input.

Kỳ vọng là khi con trỏ đang hover trên một màn hình mobile có nội dung dài, scroll wheel/trackpad phải ưu tiên scroll nội dung của màn hình đó. Chỉ khi màn hình con đã scroll hết hoặc không có overflow thì mới chuyển scroll cho vùng preview lớn bên ngoài.

Ngoài ra UI nên tránh để hai scrollbar chồng/đè nhau hoặc hiển thị gây nhiễu. Nếu cần, có thể khóa chiều cao vùng screen, dùng scroll chaining rõ ràng, hoặc cho phép chọn/focus screen trước khi scroll nội dung bên trong.

Attachment:

Ảnh 1 cho thấy result có nhiều màn hình mobile trong carousel, mỗi screen có scrollbar nội bộ. Ảnh 2 cho thấy khi zoom/hover vào screen đang chọn, scrollbar bên trong xuất hiện nhưng không scroll được nội dung screen; chỉ vùng preview lớn bên ngoài nhận scroll.

8:46 PM