Việc sử dụng History API để quản lý URL 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 thức này là các vị trí cuộn được lưu trữ và quan trọng hơn là khôi phục bất cứ khi nào bạn di chuyển qua nhật ký. Điều này thường dẫn đến các chuyển đổi không đẹp mắt 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 dẫn đến trải nghiệm người dùng tồi tệ.
Để làm cho vấn đề trở nên tồi tệ hơn, bạn có thể làm rất ít việc: 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!). Tuy nhiên, Firefox 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 giá trị đó. Bah!
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 hai giá trị chuỗi: auto giữ nguyên mọi thứ như hiện tại (và là giá trị mặc định) và manual, có nghĩa là bạn (với tư cách là nhà phát triển) sẽ sở hữu mọi thay đổi cuộn có thể cần thiết khi người dùng di chuyển qua 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à đang thử nghiệm (mặc dù rất tuyệt vời), vì vậy, hãy nhớ kiểm tra xem tính năng này có được cung cấp 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ẽ tìm thấy history.scrollRestoration trong Chrome 46 trở lên và có thể tìm thông số kỹ thuật của lớp này 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 muốn họ hỗ trợ scrollRestoration.