Webkitのスクロールバーボタンをカスタマイズするときに「無効」状態にカスタムCSSスタイルを与える方法

Question

通常のクロムスクロールバーの矢印ボタンは、スクロールバーのつまみが矢印の途中にあるときに無効のような状態になります。

スタイリングスクロールバーのセレクタは::-webkit-scrollbar*です。

ボタンの特定の状態をスタイルするために使用できるセレクターは何ですか？ ::webkit-scrollbar-button:disabledはこの状態では機能しません。

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

Answer 1

にスクロールするものがない場合、私はちょうど完全にスクロールバーを非表示にします。これはCSSで実際に可能かどうか私はJavaScriptでこれを行うと考えることができ

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

Answer 2

、

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

は、私は確信しているが、私は本当にそれで間違っていることにしたいです。今のところ、これは私が持っているすべてです。私の基礎研究から

Answer 3

回答

、私はこれが可能であるかわかりません。このcss-tricks.comページに基づいて、これまで見たことがないと、アクティブまたは非アクティブのスクロールバーボタンの疑似セレクタは表示されません。ここにリストされたセレクターがあります。

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

ボタンをすべて削除することをお勧めします。

Answer 4

jqueryプラグインを使用してこれを試すことができます。ここで私はここでGithub link.

を添付した

あなたはまた、このlinkからスクロールバーの例を見つけることができますPlugin webpage.

です。

---

別の方法：

CSSスクロールバーのカスタマイズ

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

この5月はあなたを助け願っています。