3

カスタムスクロールバーを表示する必要があります。可能であれば、jQueryプラグインの使用は避けたいと思います。では、HTML5とCSS3でこのようなことをすることはできますか？：

.myScrollableBox {
  width: 200px;
  height: 500px;

  /* Display scrollbar if content is bigger than the box */
  overflow: auto;

  /* This doesn't work, but can I do something similar? */
  scrollbar-image: url(/images/myscrollbar.png); 
}
4

3 に答える 3

12

ブラウザがツールバー要素のスタイル設定をサポートしている場合（=はWebKitに基づいています）、実際には可能です。多くのチュートリアル（たとえば、この素晴らしいbackground-urlチュートリアルなど）では言及されていませんが、プロパティを使用して、色の代わりにカスタム画像を使用できます。

たとえば、このページでは、（Chromeデベロッパーツールで）スタイルを...に変更しました。

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: url('http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/header-demos.jpg');
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

...そして出来上がり、私はシアン化物のスクローラーを持っています。）。

于 2012-10-04T12:49:36.613 に答える
4

はい、できますが、すべてのブラウザでサポートされているわけではありません。Webkit（Chromeなど）は、cssを使用してこれをサポートしています。

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

続きを読む：https ：//www.webkit.org/blog/363/styling-scrollbars/

Internet Explorerでは、scrollbar -face-colorや-ms-scrollbar- face-colorなどのcssを使用できます。 

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

続きを読む：http：//msdn.microsoft.com/en-us/library/ie/hh772048%28v=vs.85%29.aspx

私の知る限り、他のブラウザは現時点ではこれをサポートしていません。

于 2012-10-04T12:48:57.597 に答える
-3

いいえ、それは実際には不可能です。ブラウザで使用されるスクロールバーは、htmlページ内に配置された画像ではありません。これはブラウザロジックの一部です。単純に置き換えることはできません。

于 2012-10-04T12:38:55.470 に答える