So geben Sie einen benutzerdefinierten CSS-Stil für den Zustand "disabled" beim Anpassen einer Webkit-Bildlaufleiste ein

Question

Normale Chrome-Bildlaufleisten-Pfeilschaltflächen weisen einen deaktivierten ähnlichen Status auf, wenn der Bildlaufleisten-Daumen ganz auf den Pfeil zeigt.

Es gibt ::-webkit-scrollbar* Selektoren für Styling Scrollbars.

Welchen Selektor kann ich verwenden, um diesen bestimmten Zustand der Schaltfläche zu stylen? ::webkit-scrollbar-button:disabled funktioniert nicht für diesen Status.

Codepen: https://codepen.io/mattyork/pen/oGWOZY?editors=1100

Answer 1

Wenn es nichts zu blättern ist, würde ich nur die Bildlaufleiste ganz verbergen.

body { 
     overflow: hidden; 
     height: 100vh; 
    } 

Answer 2

ich nur dies zu tun, über JavaScript denken kann,

// Every time the window scrolls. 
addEventListener("scroll",() => { 
    // When scrollbar is at its zenith, do your CSS. 
    if (!document.querySelector("style[data-id=myStyle")) 
     head.innerHTML += `<style data-id=myStyle> ::-webkit-scrollbar { opacity: .5 } </style>`; 

    // When scrollbar is not at the top, remove the CSS. 
    else 
     (document.querySelector("style[data-id=myStyle") || document.createElement("style")).remove() 
}, false) 

Ich bin sicher, ob dies wirklich möglich in CSS, aber ich mag wirklich auf, dass falsch. Für jetzt, das ist alles was ich habe.

Answer 3

Antwort

Aus meiner Grundlagenforschung, ich bin nicht sicher, ob dies möglich ist. Basierend auf dieser Seite, die ich wette, dass Sie gesehen haben, listet es keine Pseudo Selektoren für aktive oder inaktive Scrollbar-Schaltflächen auf. Hier sind die aufgelisteten Selektoren.

:horizontal 
:vertical 
:decrement 
:increment 
:start 
:end 
:double-button 
:single-button 
:no-button 
:corner-present 
:window-inactive 

Stattdessen könnten Sie die Schaltflächen alle zusammen entfernen.

Answer 4

Sie können dies mit dem jquery-Plugin versuchen.

Hier habe ich angebracht, um die Github link.

Hier ist die Plugin webpage.

Sie auch die Beispiele für die Scrollbar von diesem link finden.

---

Eine andere Methode:

CSS Scrollbar Customization

* { 
 
     list-style:none; 
 
     margin:0; 
 
     padding:0; 
 
    } 
 
    body { 
 
     background: #333; 
 
     padding:20px; 
 
    } 
 
    #content { 
 
     background:transparent; 
 
     height:400px; 
 
     padding:0 10px 0 0; 
 
     width:400px; 
 
    } 
 
    #content li { 
 
     background:#666; 
 
     height:100px; 
 
     margin-bottom:10px; 
 
    } 
 
    #content li:last-child { margin-bottom: 0; } 
 

 
    .scrollable-content { 
 
     overflow-x:hidden; 
 
     overflow-y:scroll; 
 
    } 
 
    .scrollable-content::-webkit-scrollbar { 
 
     width:30px; 
 
    } 
 
    .scrollable-content::-webkit-scrollbar * { 
 
     background:transparent; 
 
    } 
 
    .scrollable-content::-webkit-scrollbar-thumb { 
 
     background:#999 !important; 
 
    }

<ol class="scrollable-content" id="content"> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ol>

Hoffnung kann dies Ihnen hilft.