文本跳转悬停滚动条

Question

我正在尝试在许多地方使用的悬停滚动条样式，但遇到了问题。悬停时滚动条的外观会导致文本跳转，看起来很刺耳。

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


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

此Fiddle显示鼠标悬停时的跳跃文字 我可以以某种方式阻止文本的跳跃，同时保持滚动条的外观在悬停？

Answer 1

只需为您的文字使用<p>标记，如下所示：

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

firefox的更新：

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

Answer 2

我建议在div#scroll内设置另一个容器，其宽度略小于固定宽度。 这样，当滚动出现时，您的文本将不会“跳转”。由于滚动条在不同的操作系统（Windows，Mac，Linux）上具有不同的宽度，因此您应该在右侧留出一些空闲空间，其中会出现滚动条。

请在此处查看我的小提琴：http://jsfiddle.net/5RXSW/

为了使容器更加可见，我已经应用了填充和背景颜色。您可以根据需要调整这些样式，但请为div#scroll右侧的滚动条保留一些像素。

Answer 3

您可以在悬停时更改容器的宽度，这样当滚动条出现时，它会向外推而不是向内推。这可以防止文本移动。

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

为实现这一目标，我已将此行添加到您的CSS中：

#scroll:hover {
    width: 360px;
}