Việc sử dụng API lịch sử để quản lý URL của bạn là một tính năng tuyệt vời và như 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 tính năng này là vị trí cuộn được lưu trữ và quan trọng hơn là được khôi phục bất cứ khi nào bạn duyệt qua lịch sử. Điều này thường có nghĩa là vị trí cuộn sẽ tự động thay đổi khi vị trí cuộn tự động thay đổi, đặc biệt là nếu ứng dụng của bạn 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ẽ mang đến trải nghiệm tồi tệ cho người dùng.
Thậm chí, bạn không thể làm gì trong trường hợp 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 nó vẫn hoạt động được!). Tuy nhiên, Firefox sẽ kích hoạt sự kiện scroll trước popState, nên bạn không biết giá trị cuộn cũ là gì để khôi phục lại. Ôi!
Tuy nhiên, tin vui là có thể khắc phục được vấn đề: history.scrollRestoration. Hàm này có hai giá trị chuỗi: auto (giữ nguyên mọi giá trị 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ẽ sở hữu mọi thay đổi về thao tác cuộn có thể cần thiết khi người dùng duyệt xem nhật ký ứ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().
Tính năng này là tính năng mới và thử nghiệm (mặc dù là tính năng hoàn toàn tuyệt vời), vì vậy, hãy nhớ kiểm tra xem tính năng này có sẵn hay không trước khi sử dụng:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
Bạn sẽ thấy history.scrollRestoration trong Chrome 46 trở đi và bạn có thể xem thông số kỹ thuật của trình duyệt này tại đây.
Đừng quên để lại ý kiến phản hồi cho chúng tôi và cho nhà cung cấp khác biết nếu bạn muốn họ hỗ trợ scrollRestoration.