10

スクロールトラックを完全に取り除く方法はありますか? または、コンテンツを押しのけるのではなく、コンテンツをオーバーレイするようにしますか? iOS/Lion のスクロールバーが好きですか?

以下はかなり近いものですが、トラックは透明ですが、スクロール可能な領域のコンテンツが押し出され、ページの背景が透けて見えます。 

::-webkit-scrollbar {  
    width:8px;
    height:8px;
    -webkit-border-radius: 4px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
    background-color:transparent;
}

::-webkit-scrollbar-thumb {  
    background-color: rgba(053, 057, 071, 0.3);
    width: 6px;
    height: 6px;
    -webkit-border-radius:4px;
}
4

1 に答える 1

1

うーん、私は以前にこれに答えたと思っていましたが、そうではないかもしれません:

  • ボディのオーバーフローを隠す
  • サイトのコンテンツ全体またはスクロールしているものを div でラップします。
  • div の css プロパティを含めます (overflow:scroll または overflow-y:scroll)。

スクロールは本文の一部ではないため、rgba(0,0,0,0.3) を使用してトラック css を任意の不透明度に設定できるようになりました。

試してみたい場合に、Firefox のスクロール バーをカスタマイズするためのもう 1 つのヒントは次のとおりです。

  • オーバーフローを実行し、(z-index を介して) スクロールバーを任意の色の透明な div でオーバーレイします。
  • スクロール セクション全体に div を配置します (ウィンドウ全体にスクロールを使用している場合は、おそらく position:absolute; right:0; のようなものです)。
  • ポインタ イベントを使用: なし。divs css で半透明にします。

これにより、Firefox のスクロールに少し色/テクスチャが与えられます。(比較のために、強制的に右にスクロールするのが理想的かもしれません)

まだ試していませんが、可能です

于 2012-03-24T16:43:05.997 に答える