3

多くの場所で使用されているオンホバースクロールバースタイルを試していましたが、問題が発生しました。ホバリング時にスクロールバーが表示されると、テキストがジャンプし、耳障りに見えます。

#scroll {
   width: 200px;
   height: 200px;
   overflow: hidden;
}


#scroll:hover {
  overflow-y: scroll;
}

このフィドルは、マウスのホバリングでジャンプするテキストを示しています。ホバーでスクロールバーの外観を維持しながら、テキストのジャンプをどうにかして防ぐことができますか？

4

3 に答える 3

3

<p>次のようにテキストにタグを使用するだけです。

http://jsfiddle.net/pdbYz/6/

Firefoxの更新：

http://jsfiddle.net/pdbYz/19/

于 2012-11-20T09:37:54.730 に答える
1

div#scroll私は、固定された、わずかに狭い幅の別のコンテナを中に入れることを提案します。このようにして、スクロールが表示されたときにテキストが「ジャンプ」しません。スクロールバーはOS（Windows、Mac、Linux）によって幅が異なるため、スクロールバーが表示される右側に空き領域を残す必要があります。

ここで私のフィドルを見てください：http：//jsfiddle.net/5RXSW/

コンテナをより見やすくするために、パディングと背景色を適用しました。これらのスタイルは必要に応じて微調整できますが、div#scrollスクロールバーの右側にいくつかのピクセルを予約してください。

于 2012-11-20T09:31:07.990 に答える
-1

ホバー時にコンテナの幅を変更して、スクロールバーが表示されたときに、内側ではなく外側に押すようにすることができます。これにより、テキストが移動しなくなります。

http://jsfiddle.net/pdbYz/3/

これを実現するために、CSSに次の行を追加しました。

#scroll:hover {
    width: 360px;
}
于 2012-11-20T09:27:08.417 に答える