css - 悬停滚动条上的文本跳转

Question

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

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


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

这个小提琴显示了鼠标悬停时的跳跃文本我可以在保持悬停时滚动条的外观的同时以某种方式防止文本的跳跃吗？

Answer 1

只需<p>对您的文本使用标签，如下所示：

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

火狐更新：

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;
}