5

次のようにjqueryを介してスクロールバーのつまみの可視性を設定しようとしました:

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

しかし、実際には何もしませんでした。これが私のCSS定義です：

::-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;
}

スクロールを有効にする必要があるため、オーバーフローを非表示にしてスクロールを無効にすることはできません.javascriptを使用してスクロールバーのつまみを非表示にするだけです。

4

2 に答える 2

13

jQueryを使用してhtml疑似要素をクエリすることはできません。
この種のルールには回避策を使用する必要があります。cssで2つの異なるルールを指定します。

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

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

そして、ルートノード（html）からクラスを追加/削除するだけでそれらを有効/無効にします：

$('html').addClass('hide-scrollbar');
// now the second rule is active and the scrollbar is hidden
于 2012-09-23T19:12:19.550 に答える
6

これを行うには、純粋なJavaScriptを使用できます。

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

適切なスタイルシートを選択できるようにするには、（またはタグのtitle属性を使用して）タイトルを付けてから、次の手順を実行します。linkstyle

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;");
    }
} ​
于 2012-09-23T19:08:27.523 に答える