Sposób nadawania niestandardowego stylu CSS dla stanu "wyłączony" podczas dostosowywania przycisku paska przewijania na stronie internetowej

Question

Normalne przyciski przewijania z chromowaną klawiaturą mają stan wyłączony, gdy suwak paska przewijania jest przesunięty do końca.

Dostępne są selektory ::-webkit-scrollbar* do stylizowania pasków przewijania.

Jakiego selektora można użyć do ułożenia tego konkretnego stanu przycisku? ::webkit-scrollbar-button:disabled nie działa w tym stanie.

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

Answer 1

Jeśli nie ma nic, aby przejść do, chciałbym po prostu ukryć pasek przewijania całkowicie.

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

Answer 2

mogę myśleć tylko o to zrobić za pośrednictwem JavaScript,

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

jestem pewien, czy to naprawdę możliwe w CSS, ale naprawdę chcę być źle w tej sprawie. Na razie to wszystko, co mam.

Answer 3

Odpowiedź

Z moich badań podstawowych, nie jestem pewien, że to jest możliwe. Na podstawie tej strony o nazwie css-tricks.com, na którą się założyłem, nie ma żadnych pseudo selektorów dla aktywnych lub nieaktywnych przycisków paska przewijania. Oto wymienione selektory.

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

Zamiast tego można rozważyć całkowite usunięcie przycisków.

Answer 4

Możesz spróbować tego, używając wtyczki jquery.

Tutaj mam załączeniu Github link.

Oto Plugin webpage.

Można również znaleźć przykłady dotyczące przewijania z tego link.

---

Inna metoda:

CSS przewijania Dostosowanie

* { 
 
     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>

Nadzieja to maja pomaga.