Sử dụng API lịch sử để quản lý URL thật tuyệt vời và đó là một tính năng quan trọng của các ứng dụng web tốt. Tuy nhiên, một trong những nhược điểm của phương pháp này là các vị trí cuộn được lưu trữ, sau đó quan trọng hơn là được khôi phục mỗi khi bạn duyệt xem nhật ký. Điều này thường có nghĩa là vị trí cuộn sẽ tự động thay đổi, đặc biệt là khi ứng dụng chuyển đổi hoặc thay đổi nội dung của trang theo bất kỳ cách nào. Cuối cùng, điều này sẽ dẫn đến trải nghiệm người dùng không tốt.
Thậm chí còn tệ hơn, bạn không có cách nào để giải quyết vấn đề này: Chrome kích hoạt sự kiện popState trước sự kiện scroll, nghĩa là bạn có thể đọc vị trí cuộn hiện tại trong popState rồi đảo ngược vị trí đó trong trình xử lý sự kiện scroll bằng window.scrollTo (Ewww, nhưng ít nhất thì nó vẫn hoạt động!). Tuy nhiên, Firefox sẽ kích hoạt sự kiện scroll trước popState, vì vậy, bạn không biết giá trị cuộn cũ là gì để khôi phục sự kiện đó. Ôi!
Tuy nhiên, tin vui là có một cách khắc phục tiềm năng: history.scrollRestoration. Phương thức này nhận 2 giá trị chuỗi: auto để giữ nguyên mọi nội dung hiện tại (và là giá trị mặc định) và manual, nghĩa là bạn (với tư cách là nhà phát triển) sẽ có quyền sở hữu mọi thay đổi về thao tác cuộn mà có thể cần thiết khi người dùng duyệt xem nhật ký của ứng dụng. Nếu cần, bạn có thể theo dõi vị trí cuộn khi đẩy các mục nhật ký bằng history.pushState().
Đây là tính năng mới và mang tính thử nghiệm (mặc dù cực kỳ tuyệt vời), vì vậy, hãy nhớ kiểm tra xem tính năng này có sẵn hay chưa trước khi sử dụng:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
Bạn sẽ tìm thấy history.scrollRestoration trong phiên bản Chrome 46 trở lên và xem thông số kỹ thuật tại đây.
Đừng quên để lại phản hồi cho chúng tôi và cho các nhà cung cấp khác biết nếu bạn cũng muốn họ hỗ trợ scrollRestoration.