Chrome：鼠标悬停在某些元素上会导致垂直滚动条跳到顶部

Question

我的应用程序在页面上包含一个垂直滚动条，因为页面上我的两个列表中的一个可能很长，我希望用户向上或向下滚动。我发现有时用户只是将鼠标悬停在页面上的其他元素上，如果滚动条位于底部，则突然显示Chrome会导致滚动条跳到顶部。

有人在Chrome中看到此行为吗？它适用于其他浏览器。我尝试在我的一个标题div元素上更改底部填充：

padding: 0.75em 2em 1.75em 2em;

似乎已经减少了问题，但问题仍然偶尔发生。我注意到的一件事是，当我的一个列表太长时，就会发生这种情况。

Answer 1

原来这是一个CSS问题。每当元素悬停时，CSS使用：hover选择器在元素上添加了一个box-shadow。这导致边框增加并导致列表更改大小。当我删除了盒子阴影时，问题就消失了。这不是Chrome问题。

Answer 2

我看到你已经解决了你的问题，但我刚刚碰到了一个非常类似的问题，当列表中的第一个元素悬停时，Chrome（并且只有Chrome）会将列表滚动到顶部。我没有盒子阴影，而是有一个带有一些填充的列表：

.list {
    padding: 0 10px;
}

当一个列表项被悬停时，会添加一个负边距和一些填充（出于我无法记住的原因）：

.list-item:hover {
    margin: 0 -10px;
    padding: 0 10px;
    background-color: lightblue;
}

这并没有改变列表的大小，至少在视觉上是这样。但在看到你的问题和答案后，我改变了它，以便列表没有任何填充，而是所有填充和边距都在列表项上。问题解决了！

Answer 3

有时“非悬停” CSS的信息不完整； “悬停” CSS会指定此额外信息。确保在“ hover” CSS中指定的所有信息（例如“ top：”）也在“ non-hover”中也有一个条目。