3

ユーザーがdivにカーソルを合わせているかどうかに応じて、CSSを使用してスクロールバーを表示/非表示にするスクロールdivがあります。ホバーなし=スクロールバーなし。

div.mouseScroll {
    overflow: hidden;
}

div.mouseScroll:hover {
    overflow-y: scroll;
}

1つの問題を除いて、非常に単純です。ユーザーがdivにカーソルを合わせると、スクロールバーが表示されますが、その際、スクロールバーに合わせてdivのコンテンツのサイズもわずかに変更されます。スクロールバーを横に表示したり、上に置いたりする方法はありますか？スクロールバーが追加されたときにdiv内のコンテンツのサイズが変更されないようにするために必要なことは何でも。

javascriptを使用しても大丈夫です。

4

3 に答える 3

4

両方の状態で永続的visibilityに表示されるスクロールバーを非表示/表示するために使用します ( jsFiddle demoを参照):

CSS:

.test {
    background: #ccc;
    width: 150px;
}

.test > DIV {
    overflow-y: scroll;
    visibility: hidden;
    height: 150px;
}

.test > DIV > DIV {visibility: visible; }

.test:hover > DIV {visibility: visible; }

    *+HTML .test > DIV > DIV {min-height: 0; } /* hasLayout for IE7 */

HTML:

<div class="test"><div><div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></div></div>
于 2012-10-10T14:18:00.207 に答える
0

デフォルトのスクロールバーの機能を変更する唯一の方法は、JavaScriptで完全にカスタムのスクロールバーを実装することです。ここを参照してください：スクロールバーを非表示にして、Facebookの新しいチャットサイドバーのようにホバーに表示します

受け入れられた回答のJSFiddleは、ソースコードを提供します。

于 2012-10-12T04:42:53.987 に答える
0

これがあなたが探しているものかどうかわかりません。

ホバー状態のスタイルに少し幅を追加

div.mouseScroll {
    overflow: hidden;
    width:200px;
    height:300px;
}

div.mouseScroll:hover {
    overflow-y: scroll;
    width:220px;
}
于 2012-10-10T14:13:17.027 に答える