Elementor הגדרת אורך לסקרול בר

[מלכההה]

הי
מנסה לשנות עיצוב לסקרול בר באתר שלי ראיתי כמה אנשים שמציעים קוד אבל אף אחד לא מציע קוד שהגובה של הגולל לא ענק
אני מנסה להשתלט על הגובה אך ללא הצלחה
אשמח אם מישהו יכול להשלים לי את הפרט הזה שחסר בפאזל כרגע- יעזור מאוד!
תודה

 

[>השראה<]

אם אין כמעט תוכן בדף אז אוטומטית הוא ענק, אם התוכן הוא גדול אז הסקרול בר נהיה קטן.

 

[מלכההה]

אבל אני רואה אתרים שבכל עמוד זה אותו אורך
אין דרך לשלוט?

 

[צנצנת]

אפשר לתת לthumb
Border-top + border-bottom
בצבע של הtrack ובעובי הרצוי,
מה שגורם לו להיראות קטן יותר.

 

[מלכההה]

אפשר לתת לthumb
Border-top + border-bottom
בצבע של הtrack ובעובי הרצוי,
מה שגורם לו להיראות קטן יותר.

תודה
ניסיתי
וזה מה שמתקבל:
יש עוד משהו שיכול להיות?

 

[>השראה<]

אני משער שעם קוד CSS אפשר לשלוט גם על הגודל אבל אולי @חגית קרמר תדע לומר לך.

 

[אלעזר 1]

Change scrollbar height

I would like to know if it's possible to change scrollbar height like this image: I tried with ::-webkit-scrollbar {max-height: 50%; height: 50%;} Or ::-webkit-scrollbar-track {max-height: 50%; h...

stackoverflow.com

 

[מלכההה]

@אלעזר 1 תודה!
לא מצאתי משהו שעזר לי
@>השראה< באמת ראיתי בבלוג של @חגית קרמר אבל לא היה מענה לגובה
משום מה זה ממש מציק לי ואני ישמח לפתרון

 

[אלעזר 1]

עכשיו אני רואה ששם מדובר על משהו אחר...
מצאתי עכשיו את:

Can't apply width and height to -webkit-scrollbar using CSS

::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-thumb { background-color:#808080; } Why do the width and height attributes not work?

stackoverflow.com

ושם טוענים ש:

You cannot apply height to scrollbars as the browser needs to adjust height based on how much there is to scroll on the page (depending on the height of the page).

You can test it by having content that fits on a single page and by having content that is 3000px in height and see how the scrollbar will lower its size.

ותרגום גוגל:

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

אתה יכול לבדוק את זה על ידי תוכן שמתאים לדף יחיד ועל ידי תוכן שגובהו 3000 פיקסלים ולראות כיצד סרגל הגלילה יוריד את גודלו.

אחד הפתרונות המוצעים שם הוא להשתמש ב-CSS ברקע תמונה:

::-webkit-scrollbar-thumb {
    background-color:#808080;
        background:url("http://www.topdesignmag.com/wp-content/uploads/2010/12/137.jpg");
        background-repeat: no-repeat;
  /* background-attachment: fixed; */
  background-position: center;
     
}

 

[אלעזר 1]

מצאתי משהו שעונה לכאורה על השאלה:

10 Best Custom Scrollbar Plugins In jQuery And Vanilla JS (2023 Update) | jQuery Script

These 10 Best Custom Scroll Bar jQuery and Vanilla JavaScript Plugins enable you to beautify and enhance the native & ugly browser scrollbars.

www.jqueryscript.net

הדגמה:

jQuery OverlayScrollbars: Custom Scrollbars Plugin Demos

www.jqueryscript.net

Highly Customizable Custom Overlay Scrollbar Plugin With jQuery

The jQuery OverlayScrollbars plugin provides a simple way to create customizable, themeable overlay scrollbars on any scrollable element while preserving the native scroll functionality.

www.jqueryscript.net