השימוש ב-History API לניהול כתובות ה-URL שלכם הוא מגניב, ובמקרה כזה, זהו תכונה חיונית של אפליקציות אינטרנט טובות. עם זאת, אחד החסרונות שלו הוא שמיקומי גלילה מאוחסנים, והכי חשוב, משחזרים אותם בכל פעם שעוברים על ההיסטוריה. לרוב, המשמעות היא שמיקום הגלילה משתנה באופן אוטומטי, במיוחד אם האפליקציה עוברת מעבר או משנה את תוכן הדף בצורה כלשהי. בסופו של דבר זה מוביל לחוויית משתמש איומה.
כדי להחמיר את העניין, אין הרבה מה לעשות בעניין: Chrome מפעיל אירוע popState לפני האירוע scroll. כלומר, אפשר לקרוא את מיקום הגלילה הנוכחי ב-popState ואז להפוך אותו לגורם שמטפל באירועים של scroll באמצעות window.scrollTo (Ewww, אבל לפחות זה עובד!). לעומת זאת, Firefox מפעיל את האירוע scroll לפני popState, כך שאין לך מושג מה היה הערך הישן של הגלילה כדי לשחזר אותו. אוקיי!
עם זאת, החדשות הטובות הן שיש פתרון אפשרי: history.scrollRestoration. נדרשים שני ערכי מחרוזות: auto, ששומר את כל מה שהוא היום (והוא ערך ברירת המחדל שלו), ו-manual, ופירוש הדבר הוא שאתם כמפתח תקבלו בעלות על כל שינוי בגלילה שעשוי להיות נדרש כשהמשתמש חוצה את היסטוריית האפליקציה. במקרה הצורך, אפשר לעקוב אחר מיקום הגלילה תוך כדי דחיפת רשומות ההיסטוריה באמצעות history.pushState().
התכונה היא חדשה וניסיונית (אם כי ממש מגניב), אז כדאי לבדוק שהיא זמינה לפני שמשתמשים בה:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
אפשר למצוא את history.scrollRestoration ב-Chrome 46 ואילך, ואפשר למצוא את המפרט שלו כאן.
אל תשכחו להשאיר לנו משוב ולתת לספקים אחרים לדעת אם רוצים שהם יתמכו גם ב-scrollRestoration.