History API – שחזור גלילה

פול לואיס

ניהול כתובות ה-URL ב-History API הוא תכונה נהדרת, וזהו גם תכונה חיונית של אפליקציות אינטרנט טובות. עם זאת, אחד מהחסרונות של האפשרות הזו הוא שמיקומי הגלילה מאוחסנים, וחשוב מכך, משוחזרים בכל פעם שמנתחים את ההיסטוריה. לרוב, פירוש הדבר הוא קפיצות לא יפות כשמיקום הגלילה משתנה באופן אוטומטי, ובמיוחד אם האפליקציה עוברת מעבר או משנה את תוכן הדף בצורה כלשהי. בסופו של דבר זה מוביל לחוויית משתמש גרועה.

כדי להחמיר את המצב עוד יותר, יש מעט מאוד שאפשר לעשות בקשר לזה: Chrome מפעיל אירוע popState לפני האירוע scroll. זאת אומרת שתוכלו לקרוא את מיקום הגלילה הנוכחי ב-popState ואז להפוך אותו ב-handler של האירועים של 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.