Tôi đang gặp một số vấn đề với vị trí cuộn trên nút quay lại (lịch sử popstate) khi sử dụng bộ định tuyến phản ứng. React router v4 không xử lý việc quản lý cuộn ra khỏi hộp vì các trình duyệt đang triển khai một số hành vi cuộn tự động. Điều này thật tuyệt vời, ngoại trừ khi chiều cao của cửa sổ trình duyệt thay đổi quá đáng kể từ chế độ xem này sang chế độ xem khác. Tôi đã triển khai thành phần ScrollToTop như được mô tả tại đây: https://reacttraining.com/react-router/web/guides/scroll-restorationLàm cách nào để mọi người xử lý khôi phục cuộn bằng bộ phản ứng-v4?
Điều này thật tuyệt vời. Khi bạn nhấp vào một liên kết và đi đến một thành phần khác, trình duyệt sẽ cuộn lên trên cùng (giống như một trang web được hiển thị trên máy chủ bình thường). Vấn đề chỉ xảy ra khi bạn quay trở lại (thông qua nút quay lại trình duyệt) cho một khung nhìn với chiều cao cửa sổ cao hơn nhiều. Có vẻ như (chrome) cố gắng chuyển đến vị trí cuộn của trang trước đó trước khi phản ứng đã hiển thị nội dung (và chiều cao trình duyệt). Điều này dẫn đến việc di chuyển chỉ đi xa như nó có thể dựa trên chiều cao của khung nhìn nó đến từ đó. Xem kịch bản này:
Xem1: Danh sách phim dài (chiều cao cửa sổ 3500px).
(phim được nhấp)
View2: Chế độ xem chi tiết của phim được chọn (chiều cao cửa sổ: 1000px).
(nút Browser lại được nhấp)
Trở lại để xem 1, nhưng di chuyển vị trí không thể đi xa hơn 1000px, vì chrome đang cố gắng để thiết lập vị trí trước khi phản ứng làm cho danh sách phim dài.
Vì một số lý do, đây chỉ là sự cố trong Chrome. Firefox và Safari dường như xử lý nó tốt. Tôi tự hỏi nếu có ai khác đã có vấn đề này, và làm thế nào các bạn thường xử lý phục hồi di chuyển trong React.
Lưu ý: tất cả phim được nhập từ mẫuMovies.js - vì vậy tôi không chờ phản hồi API trong ví dụ của mình.
Xin chào, bạn đã giải quyết được sự cố chưa? Tôi đang đối mặt chính xác cùng một vấn đề –