0

NiceScroll プラグインを使用してスクロールバーのスタイルを設定しようとしています。それが提供するパラメーターに加えて css を使用してそうしています。問題は、2 つの HTML 要素を作成し、私が持っているデザインに 3 つの要素が「含まれている」ことです。

ここに私が使用しているパラメータがあります:

$('.albums').niceScroll({
    cursorcolor: '#D289A6',
    cursorwidth: '10',
    cursorborder: '',
    cursorborderradius: '12px',
    background: '#fff'
});

スクロールバーの画像は次のとおりです。

ここに画像の説明を入力 そして、これを再現するために作成した jsFiddle があります: http://jsfiddle.net/YKhce/

白い「レール」がありません。:before および :after 疑似要素を使用したくありません。これは、ユーザーが主に IE で使用するためです。

これを達成する方法は？

4

1 に答える 1

0

ボックスシャドウとアウトラインで描画できます：
http://jsfiddle.net/ScndL/

#outter {
    width: 25px;
    height: 400px;
    background:white;
    border-radius:10px;
    box-shadow:inset -1px 0 0 10px #2956a1, 0 0 0 3px #2956a1;
    outline: solid 5px #2956a1;
    outline-offset:-2px
}

正方形に更新 http://jsfiddle.net/ScndL/1/

#outter {
    width: 25px;
    height: 400px;
    background:white;
    box-shadow:inset -1px 0 0 10px #2956a1;
}
于 2013-06-06T15:46:34.177 に答える