Legen Sie die Sichtbarkeit von -webkit-scrollbar-thumb in jQuery fest - jquery, css, webkit, Bildlaufleiste

Ich habe versucht, die Sichtbarkeit des Bildlaufleisten-Daumens über jquery wie folgt einzustellen:

$("-webkit-scrollbar-thumb").css("visibility", "hidden")

Aber es hat eigentlich nichts getan. Hier ist meine CSS-Definition:

::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
background: rgba(150, 150, 150, 0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
border-radius: 2;
margin: 5px;
}

Ich kann das Scrollen nicht deaktivieren, indem ich den Überlauf verstecke, da ich immer noch das Scrollen aktivieren muss. Ich muss nur den Bildlaufleisten-Daumen durch Javascript verstecken.

Antworten:

Sie können mit jQuery keine HTML-Pseudoelemente abfragen.
Sie müssen eine Problemumgehung für diese Art von Regeln verwenden: Geben Sie im CSS zwei verschiedene Regeln an:

/*normal*/
::-webkit-scrollbar-thumb {
/*...*/
}

/*hidden*/
.hide-scrollbar ::-webkit-scrollbar-thumb{
visibility : hidden;
}

Und aktivieren / deaktivieren Sie sie dann einfach, indem Sie Klassen zum Wurzelknoten (html) hinzufügen / daraus entfernen:

$("html").addClass("hide-scrollbar");
// now the second rule is active and the scrollbar is hidden

Sie können dazu reines JavaScript verwenden:

document.styleSheets[2].addRule("::-webkit-scrollbar-thumb", "visibility: hidden;");

Um das richtige Stylesheet auswählen zu können, geben Sie ihm einen Titel (mit der Taste title Attribut in Ihrem link oder style tag) und dann mache:

for(var i = 0; i < document.styleSheets.length; i ++) {
var cursheet = document.styleSheets[i];
if(cursheet.title == "mystylesheet") {
cursheet.addRule("::-webkit-scrollbar-thumb", "visibility: hidden;");
}
} ​