Css 悬停滚动条上的文本跳转

我尝试了很多地方使用的悬停滚动条样式，但遇到了问题。悬停时滚动条的出现会导致文本跳转，看起来很不和谐

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


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

这显示鼠标悬停时的跳跃文本

---

我是否可以在悬停时保持滚动条的外观，同时以某种方式防止文本跳转？

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

为了实现这一点，我在CSS中添加了这一行：

#scroll:hover {
    width: 360px;
}

---

我建议在

div#scroll

中使用另一个固定的容器，宽度稍小一些。 这样，当滚动出现时，文本不会“跳转”。由于滚动条在不同的操作系统（Windows、Mac、Linux）上具有不同的宽度，因此您应该在滚动条出现的右侧留出一些可用空间

请看我的小提琴：

---

为了使容器更可见，我使用了填充物和背景色。您可以根据需要调整这些样式，但请在滚动条的

div#scroll

右侧保留一些像素。

只需对文本使用

标记，如下所示：

firefox的更新：

---

文本仍然“跳跃”。FireFox，Win7感谢您的回答，但我仍然看到FireFox和IE9中的文本跳跃。（在Chrome中工作）你是对的。因此，您可以为元素设置比其父元素小一些像素的宽度。