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