web-dev-qa-db-ja.com

CSSを使用した透明なスクロールバー

ここでこのコード（およびこれの多くのバリエーション）を使用しますが、スクロールトラックは＃222222またはこれに近いような濃い灰色になります。多くの例を検索しますが、すべて同じ結果になります。 Opera、ChromeとFirefoxはこのバグを示しています。修正方法は？

#style-3::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: transparent;
}

#style-3::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}

#style-3::-webkit-scrollbar-thumb {
    background-color: #000000;
}
htmlcssscrollbar
18
user3260950

純粋なcssでは、透明にすることはできません。次のような透明な背景画像を使用する必要があります。

::-webkit-scrollbar-track-piece:start {
    background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}

::-webkit-scrollbar-track-piece:end {
    background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}
12
Void Spirit
    .scrollable-content {
      overflow-x:hidden;
      overflow-y:scroll; // manage scrollbar content overflow settings
    }
    .scrollable-content::-webkit-scrollbar {
      width:30px; // manage scrollbar width here
    }
    .scrollable-content::-webkit-scrollbar * {
      background:transparent; // manage scrollbar background color here
    }
    .scrollable-content::-webkit-scrollbar-thumb {
      background:rgba(255,0,0,0.1) !important; // manage scrollbar thumb background color here
    }
7
4dgaurav

スクロールバーのbackground-colorを制御するには、-trackの代わりにプライマリ要素をターゲットにする必要があります。

::-webkit-scrollbar {
    background-color: blue;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

transparentのレンダリングに成功していませんが、色を設定することができました。

これはwebkitに限定されているため、ポリフィルでJSを使用することをお勧めします： CSSカスタマイズされたdivのスクロールバー

2
vilsbole

これを使用する場合：

body {
    overflow: overlay;
}

スクロールバーは、ページ全体で透明な背景も取ります。これにより、スクロールバーに配置する幅の一部を削除する代わりに、ページ内にスクロールバーが配置されます。

これがデモコードです。 codepenやjsfiddleの中に入れることはできませんでしたが、気付くまでにしばらくかかりましたが、透明度が表示されず、理由もわかりません。

しかし、これをhtmlファイルに入れるとうまくいくはずです。

<!DOCTYPE html>
<html>
<style>
html, body {
  margin: 0;
  padding: 0;
}

body {
  overflow: overlay;
}

.div1 {
  background: grey;
  margin-top: 200px;
  margin-bottom: 20px;
  height: 20px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(90, 90, 90);
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
</style>

<body>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>


</body>
</html>

スクロールボックスなどの他の要素にも適用できます。インスペクターモードを使用しているときに、オーバーフローを非表示にしてから他の場所に戻す必要がある場合があります。おそらく更新する必要がありました。その後、スクロールバーを再度更新することなく作業できるようになります。これはインスペクタモード用でした。

1
karl-police

display:none;スタイルシートの属性として;）
無料で写真をロードするよりもはるかに優れています。

body::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

body::-webkit-scrollbar-button:start:decrement,
body::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 0;
  background-color: transparent;
}

body::-webkit-scrollbar-track-piece {
  background-color: #ffffff;
  opacity: 0.2;

  /* Here */
  display: none;

  -webkit-border-radius: 0;
  -webkit-border-bottom-right-radius: 14px;
  -webkit-border-bottom-left-radius: 14px;
}

body::-webkit-scrollbar-thumb:vertical {
  height: 50px;
  background-color: #333333;
  -webkit-border-radius: 8px;
}
0
Dice

これを試してください、それは私のためにうまく機能します。

CSSで：

::-webkit-scrollbar
{
    width: 0px;
}
::-webkit-scrollbar-track-piece
{
    background-color: transparent;
    -webkit-border-radius: 6px;
}

そして、ここに作業デモがあります： https://jsfiddle.net/qpvnecz5/

0
karthik vishnu kumar