Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

Mira_Belle

Was soll ich den noch alles im Header unter bringen?

Skript Version 2.0.6.1

JavaScript

/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.6.1 for Firefox 111+ ***************************************************************************************** */
/* ******************************************************************************************************************************

Skript Version 2.0.8

Code

/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.8 Final for Firefox 143+ ************************************************************************************* */
/* ******************************************************************************************************************************

Und die Historie ist auch verlinkt.
Das ganze schaut dann so aus =>

Code

"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************************** */
/* Scrollbar.v2.0.7.js	  https://www.camp-firefox.de/forum/thema/139766/?postID=1278346#post1278346************************** */
/* Scrollbar.v2.0.8.js	  https://www.camp-firefox.de/forum/thema/139766/?postID=1278349#post1278349************************** */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.8 Final for Firefox 143+ ************************************************************************************* */
/* ******************************************************************************************************************************

Alles anzeigen

Eventuell sollte ich doch in deutsch schreiben, ab welcher Firefoxversion das Skript zu nutzen ist.
Denn Version: 2.x.x Final for Firefox 14x+ scheint nicht so eindeutig zu sein.

Mira_Belle

Zitat von Horstmann

Nur aus Neugierde: was ist die nötige Änderung(en) von 142 => 143, ist as das [vertical] statt [orient="vertical"] etc. ?

So ist es im wesentlichem.

Horstmann

Zitat von Mira_Belle

Zitat von Horstmann

Nur aus Neugierde: was ist die nötige Änderung(en) von 142 => 143, ist as das [vertical] statt [orient="vertical"] etc. ?

So ist es im wesentlichem.

Dankeschön.

Mira_Belle

Tja, möglicherweise ist mir der Grund, wegen der nicht übernommenen Farben, heute so beim Stöbern in diversen Skripts,
ins Auge gesprungen!

Zwei fehlende ";"

Wer das Problem hatte, dass die eigenen Symbole, nicht die eingestellte Farbe übernommen haben,
möge es noch einmal probieren und den Code korrigieren.

JavaScript

  // only for 'custom_scrollbar_arrows_version = 2'
  let cs_scrollbar_arrows_color = "#bfbfbf";			   // "#7c7c7c"	"#1e90ff"
  let cs_scrollbar_arrows_hover_color = "#ffa600";

Da fehlen vorher die ";"

Endor

Zitat von Mira_Belle

Da fehlen vorher die ";"

Das hatte ich schon gleich bemerkt und hatte die bei mir eingefügt.
Also daran hat es sicher nicht gelegen. Schade.

Mira_Belle

Endor Ich bin noch am Basteln und erst in 10 Tagen kommt die Version 143.
Ein paar Tage wird es auch mit der "Notlösung" in der Beta und der Nightly gehen.

Nicht vergessen, für den Firefox 142 ist das Skript Scrollbar.v2.0.6.1.js das Aktuelle!

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);

})()

Alles anzeigen

Endor

Hallo Mira_Belle .
Alles gut. Hier funktioniert alles einwandfrei.
Also keinerlei Eile wegen mir notwendig.
Ich hatte nur auf deinen Hinweis geantwortet.
Viele Grüße
Endor

Boersenfeger

Zitat von Boersenfeger

Wenn ich nun die Scrollbar wieder etwas breiter bekommen könnte, wäre es prima.

Nur damit dies nicht aus der Aufmerksamkeit entfleucht....

Mira_Belle

Zitat von Boersenfeger

Nur damit dies nicht aus der Aufmerksamkeit entfleucht....

Es entfleucht nicht!
Ich habe nur leider noch keine Möglichkeit gefunden die Scrollbar breiter zu machen!
Schmaler ginge, breiter aber warum auch immer nicht!

Den Code müsste sich ein Profi mal anschauen.

JavaScript

  if(thin_scrollbars === true)
	thin_scrollbars_code=`
		:root{
		  scrollbar-width: thin !important;
		}
		scrollbar[orient="vertical"] scrollbarbutton {
		  height: 14px !important;
		  width: 7px !important;
		}
		scrollbar[orient="horizontal"] scrollbarbutton {
		  height: 7px !important;
		  width: 14px !important;
		}
	`;

Alles anzeigen

Habe thin schon durch thick und auch wide ersetzt, nutzt nichts.

2002Andreas

Zitat von Mira_Belle

nutzt nichts.

Die Breite lässt sich nicht per CSS sonderlich verändern.

milupo

Zitat von Mira_Belle

Habe thin schon durch thick und auch wide ersetzt, nutzt nichts.

scrollbar-width kann nur auto, thin und none sowie globale Werte wie inherited und unset annehmen.

2002Andreas

Ergänzend:

Scrollbalken breiter machen - Anpassungen

Mira_Belle

Zitat von milupo

scrollbar-width kann nur auto, thin und none sowie globale Werte wie inherited und unset annehmen.

Ah, danke. Wo und wie finde ich so etwas heraus? Denn ich stochere z.Z. immer nur so herum.

Zitat von 2002Andreas

Die Breite lässt sich nicht per CSS sonderlich verändern.

Schade, wo bei recht schmal ja wohl geht!
scrollbar-width: thin !important;

Nur eben breiter, halt nicht.

2002Andreas

Zitat von Mira_Belle

Wo und wie finde ich so etwas heraus?

scrollbar-width - CSS | MDN

The scrollbar-width property allows the author to set the desired thickness of an element's scrollbars when they are shown.

developer.mozilla.org

Mira_Belle

2002Andreas Oh Herr im Himmel, ich bin sooo blöd!
Schon tausendmal diese Seite genutzt und gerade jetzt nicht mehr daran gedacht.
Alzheimer lässt grüßen. Ich werde alt, oder vielleicht bin ich es auch schon.

2002Andreas

Zitat von Mira_Belle

oder vielleicht bin ich es auch schon.

Du Jungspund mit deinen 30 Jahren

Mira_Belle

Mh, als ich so jung war, war es eine geile Zeit! Loveparade in Berlin, Sound of Frankfurt und vieles mehr.

Aber zurück zum Thema!

Boersenfeger Wie mir scheint, hast Du nur die Möglichkeit über das BS die Breite der Scrollbar breiter zu machen.
Hat halt den Nachteil, bzw. zur Auswirkung, dass dies im Prinzip alle Programmfenster betrifft.

grisu2099

Scrollbarbreite geht doch mit Bordmitteln... Wirkt dann auch nur beim Firefox...

Code

user_pref("widget.non-native-theme.scrollbar.size.override", 16);							/* setzt die Scrollbarbreite auf 16px) */
user_pref("widget.non-native-theme.win.scrollbar.use-system-size", false);

Die beiden Einträge in die user.js -> Neustart, fertig. Eventuell den Wert für die Breite anpassen.

2002Andreas

Zitat von grisu2099

geht doch mit Bordmitteln

Hier passiert gar nichts wenn ich das so mache.

ergibt:

Ansonsten auch:

Beitrag

RE: Firefox Scrollbalken breiter machen

Hallo,

[…]

Wie kommst du auf die Idee, widget.non-native-theme.scrollbar.style auf 30 zu setzen? Das sind alle gültigen Werte, andere gibt es überhaupt nicht:

(Quelltext, 6 Zeilen)

Sören Hentzschel

24. Dezember 2024 um 09:23

Mira_Belle

grisu2099 cool.

2002Andreas Den Firefox auch neu gestartet? Denn bei mir hat es funktioniert!

Skript zum Anpassen der Scrollbar funktioniert nicht mehr richtig

RE: Firefox Scrollbalken breiter machen

Ä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