14

私が取り組んでいるデザインの DIV に表示されるスクロールバーのスタイルを設定しようとしています。これは Webkit のみなので、プラグインではなく CSS だけでかなりの方法を得ることができると考えました。

残念ながら、私は大きな問題にぶつかりました。このデザインでは、OS X Mountain Lion / iOS のように、スクロールバーが透明な効果でコンテンツに重なる必要があります。

カスタムスタイルがスクロールバーに適用されると、スクロールバーに合わせてコンテンツのサイズが変更されます。コンテンツのサイズを変更して、インスペクターでスクロールバーの下に表示されるようにしましたが、スクロールバーを作成できないようです透明なトラック。

これらを ::-webkit-scrollbar 領域と ::-webkit-scrollbar-track 領域の両方に適用しようとしました:

  • 背景:透明
  • rgba を使用した透明な背景色
  • 透明度のある背景画像

どれも機能していないようです。あきらめて JavaScript カスタム スクロールバー ソリューションを試す前に、他の誰かが答えを持っているかどうか見てみようと思いました。

* {
  list-style:none;
  margin:0;
  padding:0;
}
body {
  padding:20px;
}
#content {
  background:#333;
  height:400px;
  padding:1px;
  width:398px;
}
#content li {
  background:#666;
  height:100px;
  margin-bottom:10px;
  width:400px;
}
.scrollable-content {
  overflow-x:hidden;
  overflow-y:scroll;
}
.scrollable-content::-webkit-scrollbar {
  background:transparent;
  width:30px;
}
.scrollable-content::-webkit-scrollbar-track {
  background:transparent;
}
.scrollable-content::-webkit-scrollbar-thumb {
  background:#999;
}
<ol class="scrollable-content" id="content">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

私はすでにこれらをチェックしました：

Webkit CSS スクロールバーのスタイリング

webkit-scrollbar が div の内容を押し上げないようにするにはどうすればよいですか?

CSS: Webkit スクロールバーをコンテンツに「プッシュ」することは可能ですか?

4

1 に答える 1

4

フィドルの例を更新しました-> http://jsfiddle.net/F9p7S/

このアプローチを試してください：

.scrollable-content::-webkit-scrollbar * {
    background:transparent;
}
.scrollable-content::-webkit-scrollbar-thumb {
    background:#999 !important;
}
于 2013-09-17T21:10:10.627 に答える