Skript zum anpassen der Scrollbar funktioniert nicht mehr richtig

Mira_Belle

Das Skript zum Anpassen der Scrollbar funktioniert leider nur noch teilweise!

Die Pfeile werden nicht mehr angezeigt!!

Es ist egal, ob das Original von Aris benutzt wird,
oder dieses =>

JavaScript

// Scrollbar.uc.js

"use strict";
/* Firefox userChrome.js tweaks - 'Custom Scrollbars' for Firefox ************************************************************ */
/* Original by Aris (aris-addons@gmx.net)************************************************************************************* */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js
/* *************************************************************************************************************************** */
/* Customized by Mira********************************************************************************************************* */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ ****************************************** */
/* Scrollbar.v1.0.6.js    https://www.camp-firefox.de/forum/thema/135133/?postID=1207718#post1207718************************** */
/* https://www.camp-firefox.de/forum/thema/136152/?postID=1222989#post1222989************************************************* */
/* Scrollbar.v2.0.2.js    https://www.camp-firefox.de/forum/thema/136167/?postID=1223096#post1223096************************** */
/* Scrollbar.v2.0.3.js    https://www.camp-firefox.de/forum/thema/136167/?postID=1223124#post1223124************************** */
/* Scrollbar.v2.0.5.js    https://www.camp-firefox.de/forum/thema/136167/?postID=1223143#post1223143************************** */
/* Scrollbar.v2.0.6.1.js  https://www.camp-firefox.de/forum/thema/136167/?postID=1223162#post1223162************************** */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.6.1 for Firefox 111+ ***************************************************************************************** */
/* ******************************************************************************************************************************

README

  about:config >
    widget.windows.overlay-scrollbars.enabled > false (Windows)
    widget.gtk.overlay-scrollbars.enabled > false (Linux)
  [!] The above preferences have to be set to 'false' for this code to work
 
  [!] DER STARTUP-CACHE MUSS NACH JEDER ÄNDERUNG GELÖSCHT WERDEN!
  -> Ordner 'startupCache' finden: Adressleiste > about:profiles > Lokales Verzeichnis > Ordner öffnen > startupCache
  -> Firefox schließen
  -> Inhalt des 'startupCache'-Ordners löschen

  Alternativ mit einem JavaScipt!
  -> https://github.com/Endor8/userChrome.js/blob/master/Firefox%2087/RestartFirefoxButtonM.uc.js
 
  Anpassungen vornehmen > Werte ändern
  - Optionen aktivieren/deaktivieren: true <-> false
  - Farbe
    - Name: red, blue, transparent 
    - Hexcode: #33CCFF, #FFF
    - rgb(a): rgba(0,0,255,0.8)
    - hsl(a): hsla(240,100%,50%,0.8)
  - Zahlen: 1, 2, 3 ... 10, 11, 12 ...
  - Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1.75
  - Farbverläufe: linear-gradient(direction, color, color, color)
  - Beispiel für Farbverläufe: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
  - vordefinierte Farbverläufe: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
  - keine Farbe oder keine Farbwerte -> verwende "unset"
*/
/* *************************************************************************************************************************** */
(function() {

  // PROFILE PHATH "CALCULATE"
  let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
  // GENERAL SCROLLBAR SETTINGS
  const custom_scrollbar_size_value = 17;               // in px // default: custom_scrollbar_size_value = 17
  // CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
  const custom_scrollbars = true;                       // default: custom_scrollbars = true
  const custom_scrollbar_arrows = true;                 // default: custom_scrollbar_arrows = true
  const cs_thumb_border = 1;                            // default: cs_thumb_border = 0 / in px 1
  const cs_thumb_roundness = 9;                         // default: cs_thumb_roundness = 0 / in px 9
  const cs_buttons_border = 0;                          // default: cs_buttons_border = 0 / in px
  const cs_buttons_roundness = 0;                       // default: cs_buttons_roundness = 0 / in px
  const cs_thumb_minimal_size = 12;                     // default: cs_thumb_minimal_size = 12; / in px
  const cs_ignore_color_gradients = true;               // default: cs_ignore_color_gradients = false / 'flat' scrollbars
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
  const cs_background_color = "#5b5b66";                // default: cs_background_color = "#DDDDDD"
  let cs_background_image_vertical = "unset";           // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_background_image_horizontal = "unset";         // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_arrows_on_buttons_buttons_size = 1.0;          // default: cs_arrows_on_buttons_buttons_size = 1.0
// - corner
  const cs_corner_background_color = "#bfbfbf";         // default: cs_corner_background_color = "#DDDDDD" / - corner
  let cs_corner_background_image = "unset";             // default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
// - thumb/slider
  const cs_thumb_color = "#bfbfbf";                     // default: cs_thumb_color = "#33CCFF" / thumb/slider
  let cs_thumb_image_vertical = "unset";                // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_image_horizontal = "unset";              // default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_thumb_hover_color = "orange";                // default: cs_thumb_hover_color = "#66FFFF"
  let cs_thumb_hover_image_vertical = "unset";          // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_hover_image_horizontal = "unset";        // default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_thumb_border_color = "#5b5b66";              // default: cs_thumb_border_color = "#33CCFF"
// - buttons
  const cs_buttons_color = "#5b5b66";                   // default: cs_buttons_color = "#66FFFF" "#5b5b66"/ buttons
  let cs_buttons_image_vertical = "unset";              // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_image_horizontal = "unset";            // default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_buttons_hover_color = "#5b5b66";             // default: cs_buttons_hover_color = "#33CCFF"
  const cs_buttons_border_color = "#5b5b66";            // default: cs_buttons_border_color = "#33CCFF" "#5b5b66"
  let cs_buttons_hover_image_vertical = "unset";        // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_hover_image_horizontal = "unset";      // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"

/* *************************************************************************************************************************** */
  // unset background image color gradients -> flat scrollbars
  if(cs_ignore_color_gradients === true)
    cs_background_image_vertical
    = cs_background_image_horizontal
    = cs_corner_background_image
    = cs_thumb_image_vertical
    = cs_thumb_image_horizontal
    = cs_thumb_hover_image_vertical
    = cs_thumb_hover_image_horizontal
    = cs_buttons_image_vertical
    = cs_buttons_image_horizontal
    = cs_buttons_hover_image_vertical
    = cs_buttons_hover_image_horizontal
    = "unset";

  let custom_scrollbars_code='';
  let custom_scrollbar_arrows_code='';
 
  if(custom_scrollbars === true)
    custom_scrollbars_code=`
      slider, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
        appearance: auto;
        -moz-default-appearance: none !important;
      }
      slider {
        background-color: ${cs_background_color} !important;
      }
      scrollbar[orient="vertical"] slider {
        background-image: ${cs_background_image_vertical} !important;
      }
      scrollbar[orient="horizontal"] slider {
        background-image: ${cs_background_image_horizontal} !important;
      }
      scrollcorner {
        background-color: ${cs_corner_background_color} !important;
        background-image: ${cs_corner_background_image} !important;
      }
      scrollbar thumb {
        background-color: ${cs_thumb_color} !important;
        border-radius: ${cs_thumb_roundness}px !important;
        box-shadow: inset 0 0 0 ${cs_thumb_border}px ${cs_thumb_border_color} !important;
      }
      scrollbar thumb[orient="vertical"] {
        background-image: ${cs_thumb_image_vertical} !important;
        min-height: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
      }
      scrollbar thumb[orient="horizontal"] {
        background-image: ${cs_thumb_image_horizontal} !important;
        min-width: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
      }
      scrollbar thumb:hover, scrollbar thumb:active {
        background-color: ${cs_thumb_hover_color} !important;
      }
      scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {
        background-image: ${cs_thumb_hover_image_vertical} !important;
      }
      scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
        background-image: ${cs_thumb_hover_image_horizontal} !important;
      }
      scrollbar scrollbarbutton {
        background-color: ${cs_buttons_color} !important;
        border-radius: ${cs_buttons_roundness}px !important;
        box-shadow: inset 0 0 0 ${cs_buttons_border}px ${cs_buttons_border_color} !important;
        height: 17px !important;
        width: 17px !important;
      }
      scrollbar[orient="vertical"] scrollbarbutton {
        background-image: ${cs_buttons_image_vertical} !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton {
        background-image: ${cs_buttons_image_horizontal} !important;
      }
      scrollbar scrollbarbutton:hover {
        background-color: ${cs_buttons_hover_color} !important;
      }
      scrollbar[orient="vertical"] scrollbarbutton:hover {
        background-image: ${cs_buttons_hover_image_vertical} !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton:hover {
        background-image: ${cs_buttons_hover_image_horizontal} !important;
      }
    `;
    
  if(custom_scrollbar_arrows === true)
    custom_scrollbar_arrows_code=`
      scrollbarbutton[type="increment"],
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],
      scrollbarbutton[type="increment"],
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        background-repeat: no-repeat;
        background-position: center !important;  */
      }
      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
        background-image: url("${ProfileDirectory}/Pfeil-hoch_hellgrau.svg") !important;
      /*  background-position: top !important;  */
      }
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
        background-image: url("${ProfileDirectory}/Pfeil-runter_hellgrau.svg") !important;
      /*  background-position: bottom !important;  */
      }
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
        background-image: url("${ProfileDirectory}/Pfeil-links_hellgrau.svg") !important;
      /*  background-position: left !important;  */
      }
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
        background-image: url("${ProfileDirectory}/Pfeil-rechts_hellgrau.svg") !important;
      /*  background-position: right !important;  */
      }

      /* hover */

      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-hoch_orange.svg") !important;
      }
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-runter_orange.svg") !important; */
      }
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-links_orange.svg") !important;
      }
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-rechts_orange.svg") !important;
      }
      scrollbar[orient="vertical"] > scrollbarbutton {
        height: ${(custom_scrollbar_size_value*cs_arrows_on_buttons_buttons_size)}px !important;
        max-width: ${custom_scrollbar_size_value}px !important;
      }
      scrollbar[orient="horizontal"] > scrollbarbutton {
        width: ${(custom_scrollbar_size_value*cs_arrows_on_buttons_buttons_size)}px !important;
        max-height: ${custom_scrollbar_size_value}px !important;
      }
    `;

  Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService)
      .loadAndRegisterSheet(Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
        ${custom_scrollbars_code}
        ${custom_scrollbar_arrows_code}
  `), null, null),

  Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService).AGENT_SHEET);

})()

/* ************************************************************************************************************************* */
/* Aris neue Version  https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js ***************** */
/* ************************************************************************************************************************* */

Alles anzeigen

Kennt jemand die Lösung?

2002Andreas

Zitat von Mira_Belle

Das Skript zum Anpassen der Scrollbar funktioniert leider nur noch teilweise!

Dürfte dieses Problem sein.

Beitrag

RE: Scrollbar Farbe ändern in Fx 143 - 144 funktioniert nicht mehr richtig

Hallo,

das tritt seit einer Änderung in diesem Bereich auf:

https://hg-edge.mozilla.org/mozilla-centra…a643a3b7158a8eb

Ich habe es mal gemeldet:

https://bugzilla.mozilla.org/show_bug.cgi?id=1985558

Sören Hentzschel

27. August 2025 um 16:31

Mira_Belle

Habe ich gesehen! Könnte sein, eventuell nur ein Bug!
Wobei ich meine, dass das Skript mit der 143 noch funktionierte, bin mir da aber nicht so sicher und kann es auch nicht mehr prüfen.

2002Andreas

Zitat von Mira_Belle

dass das Skript mit der 143 noch funktionierte,

Auch nicht richtig, die Pfeile fehlen dort auch schon:

Mitleser

Das ist für mich DIE Gelegenheit für einen Neuanfang bezogen auf die Scrolleisten!

Mein Script funzt leider ab 143 überhaupt nicht mehr (In 142 läuft das ohne Probs; ich füge in diesem Beitrag keine Icons ein, ändere keine Pfade und Variablen - Das Script ist nur zu Ansicht, nicht zum Gebrauch):

JavaScript

// B_Scrollbar_toggle.uc.js

(function () {

// ■■ START UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const buttonIcon1 = '16-scroll-area-box-text_off.svg'; // Name & Dateiendung des anzuzeigenden Symbols
const buttonIcon1ov = '16-scroll-area-box-text_off_ov.svg'; // Name & Dateiendung des anzuzeigenden Symbols
const buttonIcon2 = '16-scroll-area-box-text_over.svg'; // Name & Dateiendung des anzuzeigenden Symbols
const buttonIcon3 = '16-scroll-area-box-text_lock.svg'; // Name & Dateiendung des anzuzeigenden Symbols
const iconPath = '/chrome/css/image/'; // Pfad zum Ordner der die Icons beinhaltet
const label = 'Toggle Scrollbar';
const tooltiptext = 'Scrollbar on/off\n\nLinksklick: nur bei Hover anzeigen(gelb)/verbergen(rot)\nMittelklick: immer anzeigen(grün)/verbergen(rot)\n\n[Site/Content wird beim Umschalten neu geladen]';
// ■■ END UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));

	if (location.href !== 'chrome://browser/content/browser.xhtml') return;
// load on start
start();
/*0. Button Tooltip on/off (g2_scrollb_b = "1/0";)->*/
       try {
          CustomizableUI.createWidget({
             id: 'toggle-sb-button',
             type: 'custom',
             defaultArea: CustomizableUI.AREA_NAVBAR,
             onBuild: function(aDocument) {
                let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
                var props = {
                   id: 'toggle-sb-button',
                   class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                   removable: 'true',
                   label: label,
                   accesskey: '',
                   tooltiptext: tooltiptext
               };
           for(var p in props)
           toolbaritem.setAttribute(p, props[p]);
           return toolbaritem;
           }
        });
    } catch(e) { };

document.getElementById('toggle-sb-button').addEventListener( "click", onClick );

function onClick(event) {

if (event.button === 0) {
       	 if(g2_scrollb_b == '')  {
           	g2_scrollb_b = '1';
			sbon();
			BrowserCommands.reloadSkipCache();
            }
    else if(g2_scrollb_b == '0') {
           	g2_scrollb_b = '1';
			sbon();
			BrowserCommands.reloadSkipCache();
            }
    else if(g2_scrollb_b == '1') {
           	g2_scrollb_b = '0';
			sboff();
			BrowserCommands.reloadSkipCache();
		    }
	else if(g2_scrollb_b == '2') {
           	g2_scrollb_b = '0';
			sboff();
			BrowserCommands.reloadSkipCache();
    }
} else
if (event.button == 1) {
       	 if(g2_scrollb_b == '')  {
           	g2_scrollb_b = '2';
			sblockon();
			BrowserCommands.reloadSkipCache();
            }
    else if(g2_scrollb_b == '0') {
           	g2_scrollb_b = '2';
			sblockon();
			BrowserCommands.reloadSkipCache();
            }
    else if(g2_scrollb_b == '2') {
           	g2_scrollb_b = '0';
			sboff();
			BrowserCommands.reloadSkipCache();
		    }
    else if(g2_scrollb_b == '1') {
           	g2_scrollb_b = '0';
			sboff();
			BrowserCommands.reloadSkipCache();
		    }
	}
else
if (event.button === 2) {
alert("Rechtsklick wird nicht unterstützt");
}
else {
alert("ERROR: B_Scrollbar_toggle.uc.js");
		};
	}
/*1. Verhalten der Scrollbar beim start (ausgeschaltet/opacity:0/g2_scrollb_b = "0";)->*/
function start() {

g2_scrollb_b = '0';
	let css = `
.hidevscroll-scrollbar {
	appearance: none !important;
	border: none !important;
	position: relative !important;
	background-color: transparent !important;
	background-image: none !important;
	padding: 0px !important;
	z-index: 3516351316854 !important;
	opacity: 0 !important;
}
.hidevscroll-scrollbar[orient="vertical"] {
	margin-inline-start: -8px !important;
	min-width: 7px;
	width: 7px;
	max-width: 7px;
}
.hidevscroll-scrollbar[orient="horizontal"] thumb,
.hidevscroll-scrollbar[orient="vertical"] thumb {
	min-height: 20px!important;
}
.hidevscroll-scrollbar thumb {
	appearance: none !important;
	border-width: 0px !important;
	border-radius: 0px !important;
	background-color: #f60 !important;
/**/	opacity: 0 !important;
	transition: opacity 0.4s ease-in-out !important;
}
.hidevscroll-scrollbar:hover thumb {
	background-color: #f60 !important;
	opacity: 0.5 !important;
	transition: opacity 0.06s ease-in-out !important;
}
.hidevscroll-scrollbar thumb:active {
	background-color: #f60 !important;
	opacity: 0.9 !important;
	transition: opacity 0.06s ease-in-out !important;
}
.hidevscroll-scrollbar scrollbarbutton,
.hidevscroll-scrollbar gripper {
	display: none !important;
}
/*-------------------------------------------------*/
/*-------------------------------------------------*/
:not(select):not(hbox) > scrollbar {
/*	appearance: none !important;*/
	border: none !important;
	position: relative !important;
	background-color: transparent !important;
	background-image: none !important;
	padding: 0px !important;
	z-index: 3516351316854 !important;
	opacity: 0 !important;
}
:not(select):not(hbox) > scrollbar[orient="vertical"] thumb {
	min-height: 20px;
}
:not(select):not(hbox) > scrollbar[orient="horizontal"] thumb {
	min-width: 20px;
}
/*-------------------------------------------------
:not(select):not(hbox) > scrollbar[orient="vertical"] {
	margin-inline-start: -5px !important;
	min-width: 5px !important;
	width: 5px !important;
	max-width: 5px !important;
}
:not(select):not(hbox) > scrollbar[orient="horizontal"] {
	margin-top: -5px !important;
	min-height: 5px !important;
	height: 5px !important;
	max-height: 5px !important;
}
---------------------------------------------------*/
:not(select):not(hbox) > scrollbar thumb {
	appearance: none !important;
	border-width: 0px !important;
	border-radius: 0px !important;
	background-color: #f60 !important;
/**/	opacity: 0 !important;
	transition: opacity 0.4s ease-in-out;
}
:not(select):not(hbox) > scrollbar:hover thumb {
	background-color: #f60 !important;
	opacity: 0.5 !important;
	transition: opacity 0.1s ease-in-out;
}
:not(select):not(hbox) > scrollbar thumb:active {
	background-color: #f60 !important;
	opacity: 0.9 !important;
	transition: opacity 0.06s ease-in-out;
}
/*-------------------------------------------------*/
:not(select):not(hbox) > scrollbar scrollbarbutton,
:not(select):not(hbox) > scrollbar gripper {
	display: none;
}
/*-------------------------------------------------*/
#toggle-sb-button .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon1});
	fill: #cd0e14 !important;
	transition: fill 0.4s ease-in-out 0.0s !important;
	padding-top: 7px !important;

}
#toggle-sb-button:hover .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon1ov});
	fill: #dddddd !important;
	transition: fill 0.4s ease-in-out 0.0s !important;
	padding-top: 7px !important;

}
#toggle-sb-button:active .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon2});
	fill: var(--uc-color-gold-button) !important;
	transition: fill 0.0s ease-in-out 0.0s !important;
	padding-top: 7px !important;

}
	`;
	let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
	let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
	sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
	}
/*2. Einschalten der Scrollbar per Button (opacity:1/g2_scrollb_b = "1";)->*/
function sbon() {

g2_scrollb_b = '1';
	let css = `
.hidevscroll-scrollbar,
:not(select):not(hbox) > scrollbar {
	opacity: 1 !important;
}
#toggle-sb-button .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon2});
	fill: var(--uc-color-gold-button) !important;
	transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-sb-button:hover .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon2});
	fill: #dddddd !important;
	transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-sb-button:active .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon1});
	fill: #cd0e14 !important;
	transition: fill 0.0s ease-in-out 0.0s !important;
}
	`;
	let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
	let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
	sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
	}
/*3. Einschalten und Lock der Scrollbar per Button (opacity:1/g2_scrollb_b = "2";)->*/
function sblockon() {

g2_scrollb_b = '2';
	let css = `
.hidevscroll-scrollbar,
:not(select):not(hbox) > scrollbar {
	opacity: 1 !important;
}
.hidevscroll-scrollbar thumb {
/**/	appearance: none !important;
	border-width: 0px !important;
	border-radius: 0px !important;
	background-color: #f60 !important;
	transition: opacity 0.4s ease-in-out !important;
	opacity: 0.35 !important;
}
:not(select):not(hbox) > scrollbar thumb {
/**/	appearance: none !important;
	border-width: 0px !important;
	border-radius: 0px !important;
	background-color: #f60 !important;
	transition: opacity 0.4s ease-in-out;
	opacity: 0.4 !important;
}
#toggle-sb-button .toolbarbutton-icon {
	list-style-image:url(${curProfDir}${iconPath}${buttonIcon3});
	fill: #72a572 !important;
	transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-sb-button:hover .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon3});
	fill: #dddddd !important;
	transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-sb-button:active .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon1});
	fill: #cd0e14 !important;
	transition: fill 0.0s ease-in-out 0.0s !important;
}
	`;
	let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
	let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
	sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
	}
/*4. Ausschalten der Scrollbar per Button (opacity:0/g2_scrollb_b = "0";)->*/
function sboff() {

g2_scrollb_b = '0';
	let css = `
.hidevscroll-scrollbar,
:not(select):not(hbox) > scrollbar {
	opacity: 0 !important;
}
.hidevscroll-scrollbar thumb {
/**/	appearance: none !important;
	border-width: 0px !important;
	border-radius: 0px !important;
	background-color: #f60 !important;
	transition: opacity 0.4s ease-in-out !important;
	opacity: 0 !important;
}
:not(select):not(hbox) > scrollbar thumb {
/**/	appearance: none !important;
	border-width: 0px !important;
	border-radius: 0px !important;
	background-color: #f60 !important;
	transition: opacity 0.4s ease-in-out;
	opacity: 0 !important;
}
#toggle-sb-button .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon1});
	fill: #cd0e14 !important;
	transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-sb-button:hover .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon1ov});
	fill: #dddddd !important;
	transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-sb-button:active .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon2});
	fill: var(--uc-color-Mein Script funzt leider ab 143 überhaupt nicht mehr (In 142 läuft das ohne Probs; ich füge keine Icons ein ,ändere die Pfade und Variablen nicht nicht - nur zu Ansicht):gold-button) !important;
	transition: fill 0.0s ease-in-out 0.0s !important;
}
	`;
	let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
	let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
	sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

	}
})();

Alles anzeigen

grisu2099

Zitat von 2002Andreas

Dürfte dieses Problem sein.

Hmm, aber die farbliche Anpassung der Scrollbar funktioniert ja mit dem Skript. Lediglich die Pfeile fehlen...

Mira_Belle

Zitat von Mitleser

ich füge in diesem Beitrag keine Icons ein

Schade, hätte es gerne ausprobiert, da ich mit dem Tooltiptext nicht wirklich etwas anfangen kann.
Und in JavaScript bin ich auch nicht so konform, dass sich mir erschließt, was das Skript macht, bzw. machen soll.

Mitleser

Zitat von Mira_Belle

hätte es gerne ausprobiert

So, oder fehlt noch was?

EDIT: meine about:config Einstellungen:

widget.non-native-theme.scrollbar.style, 0
widget.non-native-theme.scrollbar.size.override, 10
layout.testing.overlay-scrollbars.always-visible, false

JavaScript

// B_Scrollbar_toggle.uc.js

(function () {

// ■■ START UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const buttonIcon1 = '16-scroll-area-box-text_off.svg'; // Name & Dateiendung des anzuzeigenden Symbols
const buttonIcon1ov = '16-scroll-area-box-text_off_ov.svg'; // Name & Dateiendung des anzuzeigenden Symbols
const buttonIcon2 = '16-scroll-area-box-text_over.svg'; // Name & Dateiendung des anzuzeigenden Symbols
const buttonIcon3 = '16-scroll-area-box-text_lock.svg'; // Name & Dateiendung des anzuzeigenden Symbols
const iconPath = '/chrome/icons/'; // Pfad zum Ordner der die Icons beinhaltet
const label = 'Toggle Scrollbar';
const tooltiptext = 'Scrollbar on/off\n\nLinksklick: nur bei Hover anzeigen(gelb)/verbergen(rot)\nMittelklick: immer anzeigen(grün)/verbergen(rot)\n\n[Site/Content wird beim Umschalten neu geladen]';
// ■■ END UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));

	if (location.href !== 'chrome://browser/content/browser.xhtml') return;
// load on start
start();
/*0. Button Tooltip on/off (g2_scrollb_b = "1/0";)->*/
       try {
          CustomizableUI.createWidget({
             id: 'toggle-sb-button',
             type: 'custom',
             defaultArea: CustomizableUI.AREA_NAVBAR,
             onBuild: function(aDocument) {
                let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
                var props = {
                   id: 'toggle-sb-button',
                   class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                   removable: 'true',
                   label: label,
                   accesskey: '',
                   tooltiptext: tooltiptext
               };
           for(var p in props)
           toolbaritem.setAttribute(p, props[p]);
           return toolbaritem;
           }
        });
    } catch(e) { };

document.getElementById('toggle-sb-button').addEventListener( "click", onClick );

function onClick(event) {

if (event.button === 0) {
       	 if(g2_scrollb_b == '')  {
           	g2_scrollb_b = '1';
			sbon();
			BrowserCommands.reloadSkipCache();
            }
    else if(g2_scrollb_b == '0') {
           	g2_scrollb_b = '1';
			sbon();
			BrowserCommands.reloadSkipCache();
            }
    else if(g2_scrollb_b == '1') {
           	g2_scrollb_b = '0';
			sboff();
			BrowserCommands.reloadSkipCache();
		    }
	else if(g2_scrollb_b == '2') {
           	g2_scrollb_b = '0';
			sboff();
			BrowserCommands.reloadSkipCache();
    }
} else
if (event.button == 1) {
       	 if(g2_scrollb_b == '')  {
           	g2_scrollb_b = '2';
			sblockon();
			BrowserCommands.reloadSkipCache();
            }
    else if(g2_scrollb_b == '0') {
           	g2_scrollb_b = '2';
			sblockon();
			BrowserCommands.reloadSkipCache();
            }
    else if(g2_scrollb_b == '2') {
           	g2_scrollb_b = '0';
			sboff();
			BrowserCommands.reloadSkipCache();
		    }
    else if(g2_scrollb_b == '1') {
           	g2_scrollb_b = '0';
			sboff();
			BrowserCommands.reloadSkipCache();
		    }
	}
else
if (event.button === 2) {
alert("Rechtsklick wird nicht unterstützt");
}
else {
alert("ERROR: B_Scrollbar_toggle.uc.js");
		};
	}
/*1. Verhalten der Scrollbar beim start (ausgeschaltet/opacity:0/g2_scrollb_b = "0";)->*/
function start() {

g2_scrollb_b = '0';
	let css = `
.hidevscroll-scrollbar {
	appearance: none !important;
	border: none !important;
	position: relative !important;
	background-color: transparent !important;
	background-image: none !important;
	padding: 0px !important;
	z-index: 3516351316854 !important;
	opacity: 0 !important;
}
.hidevscroll-scrollbar[orient="vertical"] {
	margin-inline-start: -8px !important;
	min-width: 7px;
	width: 7px;
	max-width: 7px;
}
.hidevscroll-scrollbar[orient="horizontal"] thumb,
.hidevscroll-scrollbar[orient="vertical"] thumb {
	min-height: 20px!important;
}
.hidevscroll-scrollbar thumb {
	appearance: none !important;
	border-width: 0px !important;
	border-radius: 0px !important;
	background-color: #f60 !important;
/**/	opacity: 0 !important;
	transition: opacity 0.4s ease-in-out !important;
}
.hidevscroll-scrollbar:hover thumb {
	background-color: #f60 !important;
	opacity: 0.5 !important;
	transition: opacity 0.06s ease-in-out !important;
}
.hidevscroll-scrollbar thumb:active {
	background-color: #f60 !important;
	opacity: 0.9 !important;
	transition: opacity 0.06s ease-in-out !important;
}
.hidevscroll-scrollbar scrollbarbutton,
.hidevscroll-scrollbar gripper {
	display: none !important;
}
/*-------------------------------------------------*/
/*-------------------------------------------------*/
:not(select):not(hbox) > scrollbar {
/*	appearance: none !important;*/
	border: none !important;
	position: relative !important;
	background-color: transparent !important;
	background-image: none !important;
	padding: 0px !important;
	z-index: 3516351316854 !important;
	opacity: 0 !important;
}
:not(select):not(hbox) > scrollbar[orient="vertical"] thumb {
	min-height: 20px;
}
:not(select):not(hbox) > scrollbar[orient="horizontal"] thumb {
	min-width: 20px;
}
/*-------------------------------------------------
:not(select):not(hbox) > scrollbar[orient="vertical"] {
	margin-inline-start: -5px !important;
	min-width: 5px !important;
	width: 5px !important;
	max-width: 5px !important;
}
:not(select):not(hbox) > scrollbar[orient="horizontal"] {
	margin-top: -5px !important;
	min-height: 5px !important;
	height: 5px !important;
	max-height: 5px !important;
}
---------------------------------------------------*/
:not(select):not(hbox) > scrollbar thumb {
	appearance: none !important;
	border-width: 0px !important;
	border-radius: 0px !important;
	background-color: #f60 !important;
/**/	opacity: 0 !important;
	transition: opacity 0.4s ease-in-out;
}
:not(select):not(hbox) > scrollbar:hover thumb {
	background-color: #f60 !important;
	opacity: 0.5 !important;
	transition: opacity 0.1s ease-in-out;
}
:not(select):not(hbox) > scrollbar thumb:active {
	background-color: #f60 !important;
	opacity: 0.9 !important;
	transition: opacity 0.06s ease-in-out;
}
/*-------------------------------------------------*/
:not(select):not(hbox) > scrollbar scrollbarbutton,
:not(select):not(hbox) > scrollbar gripper {
	display: none;
}
/*-------------------------------------------------*/
#toggle-sb-button .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon1});
	fill: #cd0e14 !important;
	transition: fill 0.4s ease-in-out 0.0s !important;
	padding-top: 7px !important;

}
#toggle-sb-button:hover .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon1ov});
	fill: #dddddd !important;
	transition: fill 0.4s ease-in-out 0.0s !important;
	padding-top: 7px !important;

}
#toggle-sb-button:active .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon2});
	fill: #eabb00 !important;
	transition: fill 0.0s ease-in-out 0.0s !important;
	padding-top: 7px !important;

}
	`;
	let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
	let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
	sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
	}
/*2. Einschalten der Scrollbar per Button (opacity:1/g2_scrollb_b = "1";)->*/
function sbon() {

g2_scrollb_b = '1';
	let css = `
.hidevscroll-scrollbar,
:not(select):not(hbox) > scrollbar {
	opacity: 1 !important;
}
#toggle-sb-button .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon2});
	fill: #eabb00 !important;
	transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-sb-button:hover .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon2});
	fill: #dddddd !important;
	transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-sb-button:active .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon1});
	fill: #cd0e14 !important;
	transition: fill 0.0s ease-in-out 0.0s !important;
}
	`;
	let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
	let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
	sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
	}
/*3. Einschalten und Lock der Scrollbar per Button (opacity:1/g2_scrollb_b = "2";)->*/
function sblockon() {

g2_scrollb_b = '2';
	let css = `
.hidevscroll-scrollbar,
:not(select):not(hbox) > scrollbar {
	opacity: 1 !important;
}
.hidevscroll-scrollbar thumb {
/**/	appearance: none !important;
	border-width: 0px !important;
	border-radius: 0px !important;
	background-color: #f60 !important;
	transition: opacity 0.4s ease-in-out !important;
	opacity: 0.35 !important;
}
:not(select):not(hbox) > scrollbar thumb {
/**/	appearance: none !important;
	border-width: 0px !important;
	border-radius: 0px !important;
	background-color: #f60 !important;
	transition: opacity 0.4s ease-in-out;
	opacity: 0.4 !important;
}
#toggle-sb-button .toolbarbutton-icon {
	list-style-image:url(${curProfDir}${iconPath}${buttonIcon3});
	fill: #72a572 !important;
	transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-sb-button:hover .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon3});
	fill: #dddddd !important;
	transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-sb-button:active .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon1});
	fill: #cd0e14 !important;
	transition: fill 0.0s ease-in-out 0.0s !important;
}
	`;
	let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
	let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
	sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
	}
/*4. Ausschalten der Scrollbar per Button (opacity:0/g2_scrollb_b = "0";)->*/
function sboff() {

g2_scrollb_b = '0';
	let css = `
.hidevscroll-scrollbar,
:not(select):not(hbox) > scrollbar {
	opacity: 0 !important;
}
.hidevscroll-scrollbar thumb {
/**/	appearance: none !important;
	border-width: 0px !important;
	border-radius: 0px !important;
	background-color: #f60 !important;
	transition: opacity 0.4s ease-in-out !important;
	opacity: 0 !important;
}
:not(select):not(hbox) > scrollbar thumb {
/**/	appearance: none !important;
	border-width: 0px !important;
	border-radius: 0px !important;
	background-color: #f60 !important;
	transition: opacity 0.4s ease-in-out;
	opacity: 0 !important;
}
#toggle-sb-button .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon1});
	fill: #cd0e14 !important;
	transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-sb-button:hover .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon1ov});
	fill: #dddddd !important;
	transition: fill 0.4s ease-in-out 0.0s !important;
}
#toggle-sb-button:active .toolbarbutton-icon {
	list-style-image: url(${curProfDir}${iconPath}${buttonIcon2});
	fill: #eabb00 !important;
	transition: fill 0.0s ease-in-out 0.0s !important;
}
	`;
	let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
	let uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
	sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

	}
})();

Alles anzeigen

Skript zum anpassen der Scrollbar funktioniert nicht mehr richtig

RE: Scrollbar Farbe ändern in Fx 143 - 144 funktioniert nicht mehr richtig

Ähnliche Themen

Scrollbar Farbe ändern in Fx 143 - 144 funktioniert nicht mehr richtig

Skript VerticalToolbar.uc.js funktioniert in neu erstellten Profilen nicht mehr richtig

Skript "newTabButtonUndoTabList.uc.js" funktioniert nicht mehr im Nightly - (seit Nightly 139)

Skript für vertikale Toolbar funktioniert im heutigen Nightly nicht mehr richtig

Skript für vertikale Toolbar funktioniert im neuesten Nightly nicht mehr korrekt

Mehrzeilige Tableiste funktioniert nicht mehr seit kurzem