0

高度なカスタマイズが必要な Web サイトを構築しており、スクロールバーの外観 (色、幅、スタイルなど) もカスタマイズしたいと考えています。私は現在、何をすべきか見当がつきません。

正直なところ、私はグループプロジェクトのクロム実験に取り組んでおり、まだ何も試していません. クロムのみのソリューションでも役立ちます。

4

2 に答える 2

3

IE は、次のような IE 独自の非標準 CSS 属性を通じてこれをサポートしています。

scrollbar-base-color
scrollbar-face-color
scrollbar-track-color
scrollbar-3dlight-color
scrollbar-highlight-color
scrollbar-arrow-color
scrollbar-darkshadow-color
scrollbar-shadow-color

WebKit (Chrome および Safari) も、以下を使用してこれをサポートします。

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer

WebKit の優れている点は、スクロールバーに不透明度を設定できることです。これにより、見栄えの良い UI が作成されます。

私の知る限り、これをサポートする標準的な Mozilla の方法はありません (ただし、これには未解決のバグがあるので期待できます!) ただし、スクロール可能な領域を作成するjQuery プラグインがいくつかあります。ドキュメント ウィンドウ自体にカスタム スクロールバーの色を表示することはできません。

例:

<html>
<head>
  <style>
     BODY {scrollbar-base-color: #ff00ff;}
  </style>
</head>
<body>
   <div style="height: 5000px;">
   IE Test
   </div>
</body>
</html>

WebKit の例 (Chrome/Safari):

<html>
<head>
  <style>
    ::-webkit-scrollbar {
        width: 12px;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,0.8); 
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,0.7); 
    }
  </style>
</head>
<body>
   <div style="height: 5000px;">
   WebKit Test
   </div>
</body>
</html>
于 2012-12-05T23:01:45.443 に答える
0

Internet Explorer では、scrollbar-base-colorCSS を使用してスクロールバーの色を変更できます。

他のブラウザではサポートされている場合とサポートされていない場合がありますが、標準ではありません。

他のすべてのブラウザーでは、実際の外観 (幅、矢印のスタイルなど) に影響を与えるには、JavaScript で独自のスクロールバーをプログラムする必要があります。

于 2012-12-05T22:52:07.470 に答える