Mình không biết phải gọi đây là kiểu scroll như thế nào nhưng khi người dùng kéo thanh cuộn thì nó hiển thị những component mới và làm biến mất đi những component cũ và thanh cuộn lại trở về vị trí ở giữa. Các bạn cho mình từ khóa về vấn đề này với.
Cách scroll tối ưu trong Reactjs
Tiếng việt là cuộn vô cực. Tiếng Anh: Infinity scrolling/endless scrolling
3 Likes
Những cái infinity scrolling mình thấy không xóa đi các node cũ, nó chỉ thêm các node mới vào. có cách nào để làm được việc này không
Cách 1: Bạn track vị trí của scrollbar rồi if else xóa + hiển thị thôi. Thường để làm vậy, mọi element đều có fixed size.
Cách 2: Bạn tự render thanh scrollbar riêng. Khi này đỡ phải lắng nghe event từ element mà bạn trực tiếp quản lý offset của scrollbar. Cách này làm khó hơn cách kia nhưng bù lại bạn điều khiển được nhiều thứ hơn
3 Likes
Infinite scroll mà lại k xóa code sẽ dẫn tới hiệu năng kém nếu kéo quá dài
Có 1 thứ để giải quyết vấn đề này là virtual scroll, react có thư viện react-virtualized hay react-window nổi tiếng
Tạm hiểu virtual scroll là chỉ hiển thị phần ở phạm vi nhìn thấy của người dùng, ở ngoài nó thì k hiện -> chỉ load data cần thiết -> k tốn tài nguyên nên performance tốt hơn.
4 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?