22

divタグのスクロールバーのスタイルを制御する方法はありますか？IE7とFireFox3.5.2の間でコントラストの問題が発生しています。どんな助けでも大歓迎です！

4

5 に答える 5

28

JavaScript を使用すると、スクロール バーのスタイルを設定できます。IEでもFFでも問題なく動作します。

以下のリンクを確認してください

Twinhelix 、 Example 2 、 Example 3から [または] 以下のリンクをクリックすると、約30 種類のスクロール スタイル タイプを見つけることができます。

于 2009-08-11T10:33:04.673 に答える
2

これはスクロールの仕事をうまくやっています。非常に理解しやすく、ほんの数行のコードで、よく書かれており、完全に読みやすいです。

于 2010-10-06T19:04:28.250 に答える
2

いいえ、Firefox や Safari などではできません。Internet Explorer ではできます。スクロール バーを作成できるスクリプトがいくつかあります。

于 2009-08-10T18:00:45.980 に答える
2

Web を見ると、スクロールバーのスタイルを設定する簡単な方法がいくつか見つかります。

これは男です！ http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task

そして、ここに私の実装です！ https://dl.dropbox.com/u/1471066/cloudBI/cssScrollbars.png

/* Turn on a 13x13 scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 13px;
}

::-webkit-scrollbar-button:vertical {
    background-color: silver;
    border: 1px solid gray;
}

/* Turn on single button up on top, and down on bottom */
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    display: block;
}

/* Turn off the down area up on top, and up area on bottom */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
    display: none;
}

/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:vertical:increment {
    display: none;
}

/* Place The scroll up button at the up */
::-webkit-scrollbar-button:vertical:decrement {
    display: none;
}

/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:horizontal:increment {
    display: none;
}

/* Place The scroll up button at the up */
::-webkit-scrollbar-button:horizontal:decrement {
    display: none;
}

::-webkit-scrollbar-track:vertical {
    background-color: blue;
    border: 1px dashed pink;
}

/* Top area above thumb and below up button */
::-webkit-scrollbar-track-piece:vertical:start {
    border: 0px;
}

/* Bottom area below thumb and down button */
::-webkit-scrollbar-track-piece:vertical:end {
    border: 0px;
}

/* Track below and above */
::-webkit-scrollbar-track-piece {
    background-color: silver;
}

/* The thumb itself */
::-webkit-scrollbar-thumb:vertical {
    height: 50px;
    background-color: gray;
}

/* The thumb itself */
::-webkit-scrollbar-thumb:horizontal {
    height: 50px;
    background-color: gray;
}

/* Corner */
::-webkit-scrollbar-corner:vertical {
    background-color: black;
}

/* Resizer */
::-webkit-scrollbar-resizer:vertical {
    background-color: gray;
}
于 2012-10-02T21:30:27.667 に答える
0

スクロールバーのスタイルを設定し、タッチ デバイスで動作させることができる iScroll プロジェクトもあります。 http://cubiq.org/iscroll-4

于 2012-04-04T18:53:50.970 に答える