Anpassung der scrollbar per CSS

Pentomino

Ich benutze folgenden Code zur Veränderung der scrollbar. Leider kenne ich die ursprüngliche Quelle nicht mehr:

CSS

:root{
  
  /* background color [1. color] // thumb/slider color [2. color] (Firefox 64+) *********/
  scrollbar-color: black burlywood;
  
  /* size/width *************************************************************************/
  /*    scrollbar-width: auto; = default OS scrollbars
        scrollbar-width: thin; = small scrollbars without buttons
        scrollbar-width: none; = scrollbars are hidden
        scrollbar-width: 17px; (not working yet, but might be supported in the future)  */
scrollbar-width: thin;
}

Alles anzeigen

In diesem Code wird erwähnt, dass eine mögliche Anpassung der scrollbar auch über eine "Pixelbreite" möglich werden könnte. Gibt es irgendwelche bekannten Pläne der FF-Entwickler, diese Idee umzusetzen?

Sören Hentzschel

Nein.

Die Möglichkeit einer Pixel-Angabe wurde aus dem dazugehörigen Webstandard entfernt und hat damit keine Chance, von Mozilla in Firefox implementiert zu werden. Das übrigens aus dem Grund, dass die Plattformen (Windows, macOS, Linux, Android, iOS), welche die Scrollbars bereitstellen, für variable Breiten schlicht nicht ausgelegt sind.

Pentomino

Danke für die Info. Werde dann gleich die Anmerkung aus dem Code schmeißen!

2002Andreas

Zitat von Pentomino

folgenden Code zur Veränderung der scrollbar

Ich nutze dafür hier ein Script.

Damit kann man die Farbe und auch die Breite der Scrollleiste verändern.(und einiges mehr)

Bei Interesse kann ich dir das Script posten.

.DeJaVu

Nur nicht übermütig werden

Pentomino

Zitat von 2002Andreas

Ich nutze dafür hier ein Script.

Möchte zukünftig auf Scripts verzichten Hatte ein solches früher schon erfolgreich in Gebrauch.

grisu2099

2002Andreas

Ich würde mir das Skript gern mal ansehen...

2002Andreas

Kein Problem:

Hier das Original:

https://github.com/Aris-t2/Custom…crollbars.uc.js

Und das ist meine Version davon mit deutscher Beschreibung

(wer das mal übersetzt hat kann ich nicht sagen)

JavaScript

"use strict";


/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */
/* by Aris (aris-addons@gmx.net)*************************************************************** */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js */

/* ***********************************************************************************************

 README
 
 Aktivieren einer Einstellung > var ... auf 'true' setzen
 Deaktivieren einer Einstellung > var ... auf 'false' setzen
 Anpassungen vornehmen > Aendern von Werten
 - Farbe - Name: red, blue, transparent / Hexcode: #33CCFF, #FFF
 - Farbe - rgb(a): rgba(0,0,255,0.8) / hsl(a): hsla(240,100%,50%,0.8) // a = Sichtbarkeit
 - Zahlen: 1, 2, 3 ... 10, 11, 12 ...
 - Sichtbarkeit (in Dezimalzahlen): 0.0 bis 1.0 e.g. 1.4, 1,75
 - Farbverlaeufe: linear-gradient(Richtung, Farbe, Farbe, Farbe)
 - Beispiel: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
 
 - Beispiel 2:
    Farbverlauf von links nach rechts - tranparent -> weiss mit 50%er Sichtbarkeit -> tranparent
    linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)
 
 Info
 - Zu kleine Breitenwerte werden sich negativ auf einige Oberflaechenelemente auswirken (z.B. auf Menuelisten)!
 
*********************************************************************************************** */

// Allgemeine Einstellungen

// Scrollbars ausblenden
var hide_scrollbars = false; /* Standard = false */
// Schaltflächen ausblenden
var hide_scrollbar_buttons = false; /* Standard = false */
// benutzerdefinierte Breite
var custom_scrollbar_width = true; /* Standard = false */
var custom_scrollbar_width_value = 13; /* 10-? // Standard = 17 (in px) */
// benutzerdefinierte Sichtbarkeit
var custom_scrollbar_opacity = true; /* Standard = false */
var custom_opacity_value = "0.9"; /* Standard = 1.0 */
// "schwebende" Scrollbars / Scrollbars über dem Webinhalt 
var enable_floating_scrollbars = false; /* Standard = false */
// benutzerdefinierte Scrollbars
var enable_custom_scrollbars = true;
// benutzerdefinierte Hintergrundfarbe bzw. benutzerdefinierter Hintergrundverlauf
var cs_background_color = "#CCCCCC"; /* Standard = #CCCCCC / Transparenter Hintergrund = transparent */
var cs_background_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = none */
// benutzerdefinierte Schiebereglerfarbe bzw. benutzerdefinierter Schiebereglerfarbverlauf
var cs_thumb_color = "#33CCFF"; /* Standard = #33CCFF */
var cs_thumb_image = "(to right,transparent,rgba(255,0,0,0.9),transparent)"; /* Standard = unset */
// benutzerdefinierte Schiebereglerfarbe (hover/ueber) bzw. benutzerdefinierter Schiebereglerfarbverlauf
var cs_thumb_hover_color = "red"; /* Standard = #66FFFF */
var cs_thumb_hover_image = "rgba(255,0,0)"; /* Standard = unset */
// benutzerdefinierte Schiebereglerrundung
var cs_thumb_roundness = 0; /* Standard = 0 (in px) */
// benutzerdefinierte Schiebereglerrandbreite
var cs_thumb_border = 1; /* Standard = 0 (in px) */
// benutzerdefinierte Schiebereglerrandfarbe
var cs_thumb_border_color = "#33CCFF"; /* default ##33CCFF */
// benutzerdefinierte Schaltflaechenfarbe bzw. benutzerdefinierter Schaltflaechenfarbverlauf
var cs_buttons_color = "lightgrey"; /* Standard = #000000 */
var cs_buttons_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = unset */
// benutzerdefinierte Schaltflaechenfarbe (hover/ueber) bzw. benutzerdefinierter Schaltflaechenfarbverlauf
var cs_buttons_hover_color = "#000066"; /* Standard = #000066 */
var cs_buttons_hover_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = unset */
// benutzerdefinierte Schaltflächenrundung
var cs_buttons_roundness = 0; /* Standard = 0 (in px) */


/* ******************************************************************************************** */
/* ******************************************************************************************** */
/* ******************************************************************************************** */


Components.utils.import("resource://gre/modules/Services.jsm");
var ss =  Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

var custom_scrollbars = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar, scrollcorner {\
      -moz-appearance: none !important;\
      background-color: '+cs_background_color+' !important; \
      background-image: '+cs_background_image+' !important; \
    }\
    scrollbar thumb {\
      -moz-appearance: none !important;\
      background-color: '+cs_thumb_color+' !important;\
      background-image: '+cs_thumb_image+' !important;\
      border-radius: '+cs_thumb_roundness+'px !important;\
      border: '+cs_thumb_border+'px solid '+cs_thumb_border_color+' !important; \
    }\
    scrollbar thumb:hover, scrollbar thumb:active {\
      -moz-appearance: none !important;\
      background-color: '+cs_thumb_hover_color+' !important;\
      background-image: '+cs_thumb_hover_image+' !important;\
    }\
    scrollbar scrollbarbutton {\
      -moz-appearance: none !important;\
      background-color: '+cs_buttons_color+' !important;\
      background-image: '+cs_buttons_image+' !important;\
      border-radius: '+cs_buttons_roundness+'px !important;\
    }\
    scrollbar scrollbarbutton:hover {\
      -moz-appearance: none !important;\
      background-color: '+cs_buttons_hover_color+' !important;\
      background-image: '+cs_buttons_hover_image+' !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var scrollbar_buttons = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar scrollbarbutton {\
      opacity: 0 !important;\
    }\
    scrollbar[orient="vertical"] scrollbarbutton {\
      min-height: 1px !important;\
      height: 1px !important;\
      max-height: 1px !important;\
    }\
    scrollbar[orient="horizontal"] scrollbarbutton {\
      min-width: 1px !important;\
      width: 1px !important;\
      max-width: 1px !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var scrollbar_width = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar[orient="vertical"] scrollbarbutton {\
      min-width: 0 !important;\
      width: '+custom_scrollbar_width_value+'px !important;\
      max-width: '+custom_scrollbar_width_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] scrollbarbutton {\
      min-height: 0 !important;\
      height: '+custom_scrollbar_width_value+'px !important;\
      max-height: '+custom_scrollbar_width_value+'px !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var floating_scrollbars = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar {\
      position: relative !important;\
      z-index: 1000000000 !important;\
    }\
    scrollbar, scrollcorner {\
      background-color: transparent !important; \
      background-image: unset !important; \
    }\
    scrollbar[orient="vertical"] {\
      -moz-margin-start: -'+custom_scrollbar_width_value+'px !important;\
      width: '+custom_scrollbar_width_value+'px !important;\
    }\
    scrollbar[orient="horizontal"] {\
      margin-top: -'+custom_scrollbar_width_value+'px !important;\
      height: '+custom_scrollbar_width_value+'px !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var scrollbar_opacity = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar {\
      opacity: '+custom_opacity_value+' !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

var remove_scrollbars = {

  init: function() {

  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar, scrollcorner {\
      display: none !important;\
      visibility: collapse !important;\
    }\
    \
  '), null, null);

  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

// oben aktivierte Einstellungen werden hier ausgefuehrt
if(enable_custom_scrollbars==true) custom_scrollbars.init();
if(hide_scrollbar_buttons==true) scrollbar_buttons.init();
if(custom_scrollbar_width==true) scrollbar_width.init();
if(enable_floating_scrollbars==true) floating_scrollbars.init();
if(custom_scrollbar_opacity==true) scrollbar_opacity.init();
if(hide_scrollbars==true) remove_scrollbars.init();

Alles anzeigen

grisu2099

Danke!

Anpassung der scrollbar per CSS

Ähnliche Themen

Anpassen der Scrollbar ab Firefox 69

Scroll-Schieber dunkler machen?

Youtube Scrollbar

Scrollleiste schwarz einfärben