14

DIV に内部スクロール バーと丸みを帯びた角があるシナリオを実現しようとしています。私の最初の試みはこれになりました：

ここに画像の説明を入力

スクロールバーがあるため、右隅が四角になります。

次に、スクロールバーを押し下げてカウントされたコーダーを維持するために、上部と下部のパディングを含む内部 div を追加しました。それは次のようになりました。

ここに画像の説明を入力

スクロール バーが div の全長であるハイブリッドが欲しいのですが、コーナーを四角くしないでください。これは可能ですか？

4

2 に答える 2

16

スクロールバー（ ）のborder-radius周囲のコンテナ（ ）を使用できます。scrollbar-trackscrollbar-thumb

例：

::-webkit-scrollbar {
    width: 12px;
}

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

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

jsFiddle: http://jsfiddle.net/p2bWf/

ソース: http://css-tricks.com/custom-scrollbars-in-webkit/

于 2013-02-11T18:30:15.823 に答える
3

カスタムスクロールバーを試してみてください。スクリーンショットではOSXシステムを使用していますが、IE（Windows）ではひどいものになります。

このstackoverflowの質問を見てください。

于 2013-02-11T18:04:17.350 に答える