Cách làm scroll về cuối page sau khi rendering?
31 lượt xem
Ẩn danh
Ngày 17 Tháng 05
Chào các bác, Em đang làm web bằng react nhưng có vấn đề thế này. Hiện tại em đang muốn làm chức năng là khi click vào button thì state sẽ thay đổi và nếu state = true thì ở dưới page sẽ hiện nhiều ảnh và cùng lúc đó scroll về cuối page luôn. Nên ở trong code của em thì ở phần onClick thì đổi thành setIsOpen(true) để có thể show ảnh, rồi dùng window.scrollTo({ top: document.body.scrollHeight }), nhưng lúc này chỉ nhìn thấy ảnh thôi còn scroll thì không đi xuống dưới page. Ko biết em nên sửa phần nào ạ? Ở dưới là code ví dụ của em
Đánh giá câu hỏi ngay!
Hãy ấn ↑Up Vote với những câu hỏi cụ thể và chi tiết
Hãy ấn ↓Down Vote với những câu hỏi chưa rõ ràng Careerly sẽ nhắc người hỏi chỉnh sửa lại.
1 câu trả lời
Bạn đổi isOpen của hàm onClick thành true rồi muốn scroll chạy xuống dưới thì phải, nhưng mà thực tế thì nó ko chạy theo thứ tự như thế. Vì hàm setState là hàm ko đồng bộ. Cách giải quyết đơn giản nhất cho bạn là đổi hàm onClick bằng cách dùng setTimeout.
1onClick={() => {
2 setIsOpen(true);
3 setTimeout(() => {
4 window.scrollTo({ top: document.body.scrollHeight });
5 }, 100);
6}}"Đăng ký ngay bây giờ để đọc toàn bộ câu trả lời!
Cộng đồng lập trình viên sẽ giải đáp tường tận cho bạn.
Bạn đã có tài khoản rồi?
Đăng ký ngay bây giờ để đọc toàn bộ câu trả lời!
Cộng đồng lập trình viên sẽ giải đáp tường tận cho bạn.