לעצב את ה scrollbar ב css
 

כיצד ניתן לשנות את ה scrollbar שבדפדפן?
למי שלא מבין - overflow-y:scroll;
לעצב אותו כמו גוגל וכ'ו.

----
מצאתי קודים של WEBKIT אבל הם לא תואמים לFF..


תודה רבה !

אם אתה רוצה משהו cross browser אתה חייב לעשות את זה עם JS
יש תוספים שעושים לך את זה
http://jscrollpane.kelvinluck.com/

הבנתי, מה זה בדיוק cross browser ?

תאימות לכל / לכמה שיותר דפדפנים.

תודה,
פחדתי להתעסק בקוד שלהם כי האתר נראה ממש עמוס אבל גיליתי שהוא ממש קל :)
תודה רבה!

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

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

אתה צודק במאה אחוז, לקחתי את זה בחשבון מההתחלה.

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

אני חושב שאפשר לכתוב משהו יעיל אם אתה אומר לו מתי הגודל השתנה ואת הגודל החדש בלי שהוא יצטרך לגשת לדום ולבדוק את הגודל ואני גם חושב שאפשר לעשות את הסקרולינג עצמו GPU accelerated מה שיעשה את זה טוב כמעט כמו ה native, או לפחות לחסוך ב reflows

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

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

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

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

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

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