אם יש דבר אחד שאנשים רוצים מהגלילה, זה שהיא תהיה חלקה. בעבר, גלילה חלקה ב-Chrome הייתה זמינה במקומות מסוימים, למשל כשמשתמשים גוללים באמצעות משטחי המגע או כשהם גוררים דף בנייד. אבל אם המשתמש מחובר לעכבר, הוא יקבל התנהגות גלילה 'מדורגת' יותר, שמאופיינת בתנודות, ופחות אסתטית. כל זה עומד להשתנות בגרסה 49 של Chrome.
הפתרון של מפתחים רבים לבעיית ההתנהגות המדורגת של גלילה מבוססת-קלט הוא שימוש בספריות, שמטרתן למפות מחדש את ההתנהגות הזו למשהו חלק יותר ונעים יותר לעין. המשתמשים עושים זאת גם דרך תוספים. עם זאת, יש חסרונות גם לספריות וגם לתוספים שמשנים את הגלילה:
- תחושה של עמק מוזר (uncanny valley). הבעיה הזו מתבטאת בשתי דרכים: ראשית, יכול להיות שבאתר אחד התנהגות הגלילה חלקה, אבל באתר אחר היא לא, כך שהמשתמש עלול להרגיש מבולבל מהחוסר עקביות. שנית, הפיזיקה של הספרייה לא תמיד תואמת לפיזיקה של הפלטפורמה. לכן, גם אם התנועה חלקה, היא עשויה להיראות לא נכונה או מוזרה.
- עלייה בנטייה לעימות ולתנודות בשרשור הראשי. כמו בכל קוד JavaScript שנוסף לדף, יהיה עומס מוגבר על המעבד. זה לא בהכרח אסון, בהתאם לפעולות האחרות שמתבצעות בדף, אבל אם יש עבודה ממושכת בשרשור הראשי והגלילה משויכת לשרשור הראשי, התוצאה הסופית עשויה להיות גלילה מקוטעת ותנודות.
- יותר תחזוקה למפתחים, יותר קוד להורדה על ידי המשתמשים. ספרייה לגלילה חלקה היא משהו שצריך לעדכן ולתחזק, והיא תוסיף למשקל הכולל של הדף באתר.
לרוב, החסרונות האלה רלוונטיים גם לספריות רבות שמטפלות בהתנהגויות גלילה, בין אם מדובר באפקטים של תנועת פרלקסיס או באנימציות אחרות שמקושרות לגלילה. לרוב הן גורמות לתנודות חדות, פוגעות בנגישות ובאופן כללי פוגעות בחוויית המשתמש. גלילה היא אינטראקציה מרכזית באינטרנט, ויש לשנות אותה באמצעות ספריות בזהירות רבה.
בגרסה 49 של Chrome, אופן ברירת המחדל של גלילה ישתנה ב-Windows, ב-Linux וב-ChromeOS. התנהגות הגלילה הקודמת, עם השלבים, תיעלם והגלילה תהיה חלקה כברירת מחדל. אין צורך לבצע שינויים בקוד, מלבד הסרת ספריות של גלילה חלקה אם השתמשתם בהן.
עוד תכונות שימושיות בגלילה
יש עוד כמה פיצ'רים שקשורים לגלילה שאנחנו עובדים עליהם וגם כדאי לציין. רבים מאיתנו רוצים אפקטים שמתלווים לגלילה, כמו אפקט תלת-ממדי, גלילה חלקה לקטע במסמך (למשל example.com/#somesection). כפי שציינתי קודם, הגישה הנוכחית יכולה לפגוע גם במפתחים וגם במשתמשים. יש שני תקני פלטפורמה שאנחנו עובדים עליהם שיכולים לעזור: Compositor Worklets ונכס ה-CSS scroll-behavior.
Houdini
רכיבי Compositor Worklet הם חלק מ-Houdini, ועדיין לא הושלמו המפרטים וההטמעה שלהם. עם זאת, כשתשלבו את התיקונים, תוכלו לכתוב JavaScript שפועל כחלק מצינור עיבוד הנתונים של המאגר. באופן כללי, המשמעות היא שאפקטים שמקושרים לגלילה, כמו תנועת פרלקס, יתואמו בצורה מושלמת למיקום הגלילה הנוכחי. בהתחשב בדרך שבה הגלילה מטופלת היום, שבה אירועי גלילה נשלחים לשרשור הראשי רק מדי פעם (ויכולים להיות חסומים על ידי משימות אחרות בשרשור הראשי), מדובר בשיפור משמעותי. אם אתם מתעניינים ב-Compositor Worklets או בכל אחת מהתכונות החדשות והמרתקות האחרות של Houdini, כדאי לכם לקרוא את הפוסט של Surma בנושא מבוא ל-Houdini, את המפרטים של Houdini ולשלוח את המחשבות שלכם לרשימת התפוצה של Houdini.
scroll-behavior
כשמדובר בגלילה שמבוססת על קטעים, מאפיין ה-CSS scroll-behavior הוא דרך נוספת שיכולה לעזור. אם אתם רוצים לנסות את התכונה, כדאי לדעת שהיא כבר זמינה ב-Firefox, ואפשר להפעיל אותה ב-Chrome Canary באמצעות הדגל Enable experimental Web Platform features. אם תגדירו את הרכיב <body> לערך scroll-behavior: smooth, כל הגלילות שמופעלות על ידי שינויים בקטעים או על ידי window.scrollTo יתבצעו בצורה חלקה. זה הרבה יותר טוב מאשר להשתמש בקוד מתוך ספרייה שמנסה לעשות את אותו הדבר ולתחזק אותו. כשמדובר בפעולה בסיסית כמו גלילה, חשוב מאוד לא לאכזב את המשתמשים. לכן, בזמן שהתכונות האלה נמצאות בתהליך של שיפור מתמיד, עדיין כדאי להשתמש בגישה של שיפור הדרגתי ולהסיר כל ספרייה שמנסה לבצע פוליאפיל (polyfill) של ההתנהגויות האלה.
קדימה, גלילה
החל מגרסה 49 של Chrome, הגלילה נעשית חלקה יותר. אבל זה לא הכל: יש עוד שיפורים פוטנציאליים שיכולים להגיע דרך Houdini ומאפייני CSS כמו smooth-scroll. כדאי לנסות את Chrome 49, לספר לנו מה דעתך, ויותר מכל, לאפשר לדפדפן לגלול במקרים שבהם אפשר!