לעצב את ה scrollbar ב css

[אבי בר]

נכתב במקור על ידי IgalSt

אפשר בהחלט לנסות.
פרט לכך שתצטרך לכתוב משהו בעצמך או לעשות fork מאור רציני לתוסף קיים, אתה גם תפתור בעיות מאוד מאוד ממוקדות.
הבעיה היא לדעתי שאם תנסה כל פעם לתת לתוסף את הגודל העדכני, אתה תפגע בהכמסה (encapsulation) של הלוגישה של התוסף עצמו. ככה בעצם כל מי שיכתוב דברים שמשפיעים על הסקרול יהיה חייב לדעת את הלוגיקה הפנימית (כלומר לחשב את הגודל החדש) ולזמן מטודה של הסקרולר המעוצב. כיום גם ככה הוא צריך לדעת, או לכל הפחות לזרוק איזשהו ארוע שידווח על כך שייתכן והיה שינוי כלשהו במימדים והסליידר יאזין לאירוע הזה ויבצע חישוב מחדש.
במצב האופטימלי היית רוצה להאזין לאיזשהו ארוע טבעי של הדפדפן שיגיד לך שהיה איזשהו שינוי. קיים אירוע כזה, DOMSubtreeModified, רק שהבעיה איתו שהוא נזרק ע"י הדפדפן אחרי כל שינוי (שינוי תוכן, הוספה/הסרה של Node וכו') ולכן מאוד בזבזני ובעצם לא שימושי כמעט.

בקשר ל-GPU, אכן זו גישה מעניינת ללכת עליה. החיסרון שלה הוא שתוכל להשתמש בה רק בדפדפנים מודרנים, ולפחות אחד מהם מאפשר לך לעצב את הסקרולר הטבעי (כלומר Webkit). כך שדווקא הדפדפנים שהכי מתקשים לבצע את החישובים הללו בזמן סביר לא תוכל לשפר ביצועים. וחבל

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

עריכה:
אני קצת אגלוש לנושא טיפה אחר, אבל זה מקום טוב לקטר עוד קצת על כך שדפדפנים כיום כמעט ולא מאפשרים לעצב אלמנטים שתלויים במערכת ההפעלה (selectbox, סקרול, html5 date picker & form validation וכו') וחבל. ישנה התקדמות חלקים בנושאים הללו, אבל לא מספיק. זה הזוי שגם היום, בדפדפנים מודרנים כמו FF אנחנו עדיין נאלצים לעשות פעולות אקרובטיות על מנת לעצב selectbox והוא מתעלם מ- appearance: none.

למה עשית מזה דבר כל כך מסובך? אולי במקרים ספציפים לא כדאי להתעסק עם זה.
אבל פייסבוק לדוגמא עיצבה את הסקרולבר בלי שום בעיות.
ויש מספיק סקריפטים שמבצעים את זה בהצלחה.
במקרה הכי גרוע בודקים אם הדפדפן מיושן אם כן מציגים את הסקורלבר הרגיל, בכל מקרה אחוז השימוש בie6 וie7 נמוך מדי כדי לדאוג.

[IgalSt]

נכתב במקור על ידי בניה

הדבר שאולי הכי מעצבן הוא זה אי אפשר לעשות overflow:scroll, אבל להסתיר את ה scrollbars.
ואז הדבר היחידי שהיה צריך לעשות זה לממש את הסקולבר עצמו ולא את כל הפונקציונאליות של הסקרולינג.
עכשיו עלה לי רעיון פשוט להסתיר את הסקרולבר הטבעי.
מקווה שבקרוב אני אעשה REFACTOR לזה אצלינו ויהיה לי זמן להתעמק בזה שוב.

תוספת:
ניסיתי, ואפשר לתת לPARENT עם ה overflow:scroll
visibility: hidden
לילדים שלו visibility: visible
ואז פשוט לא רואים את ה scrollbar
זה כיוון מאוד מעניין

יש לך את LionBars שעושים משהו דומה למה שאתה מציעה. אכן פתרון עדיף משמעותית. עם זאת, גם פה נתקלנו בבעיות (לדוגמה, אחת הגירסאות האחרונות של FF לא דיווה ארועי סקרול כשהם התבצעו בשיטה הזאת).

נכתב במקור על ידי אבי בר

למה עשית מזה דבר כל כך מסובך? אולי במקרים ספציפים לא כדאי להתעסק עם זה.
אבל פייסבוק לדוגמא עיצבה את הסקרולבר בלי שום בעיות.
ויש מספיק סקריפטים שמבצעים את זה בהצלחה.
במקרה הכי גרוע בודקים אם הדפדפן מיושן אם כן מציגים את הסקורלבר הרגיל, בכל מקרה אחוז השימוש בie6 וie7 נמוך מדי כדי לדאוג.

אכן במקרים ספיצים יש בעיות. במקרה הרגיל שאתה רוצה לעשות רק חלון אחד שסביבו אין שום דבר שמשפיע עליו והוא לא משתנה אחרי עליית עמוד - אתה כנראה לא תהיה בבעיה.
אבל ברגע שנסה לעשות משהו מעבור לכך (לדוגמה משהו כזה - http://jsfiddle.net/wh4Rw/), תראה מיד שזה כבר לא כ"כ פשוט. כי אחרי toggle כזה אתה צריך לחשב מחדש את הגודל ובהתאם את הסקרולבר (הוא אמור להראות אחרת אם יש לך יותר/פחות תוכן). ואם כבר עושים את זה, אתה חייב גם לוודא שהגלילה שלך לא חוזרת להתחלה אחרי שאתה מעדכן את הגודל. אז צריך לתחזק גם את זה.
ותחשוב רגע מה קורה אם יש לך חלילה אנימציה ב-toggle של slide up/down. מה עושים במצב כזה? מאתחלים כמה פעמים? רק בסוף?

וזה מקרה מאוד פשוט והגיוני שתרצה לעשות ותתקל בבעיה.
תחשוב לדוגמה על מקרה נוסף, שבו הגודל של האיזור הנגלל גדל בלי שום התערבות מצד JavaScript. לדוגמה מקרה כזה:
http://jsfiddle.net/wh4Rw/1/
מה תעשה כאן? איך תדע שאתה צריך לעדכן את הסקרול?

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

ובקשר לדפדפנים,
IE <=8 זה מיושן מבחינתי.
גם IE9 דפדפן בעייתי אפילו.
אבל כמו שראית, הבעיות לא נעצרות בדפדפנים מיושנים בלבד..

[eliran2313]

אתה יכול להסתכל פה:
http://css-tricks.com/custom-scrollbars-in-webkit/

http://webdesign.tutsplus.com/tutori...our-ui-design/