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

Question

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

有人在Chrome中见过这种行为吗？在其他浏览器中都能正常工作。我尝试更改其中一个标题div元素的底部填充，但问题依旧。

padding: 0.75em 2em 1.75em 2em;

看起来已经减少了问题，但问题偶尔仍会出现。我注意到的一件事是，当我的列表之一过长时，它会发生。

- Ray

---

一个JSfiddle会非常有用。这是一个有趣的问题，应该进行测试。 - vanntile

Answer 1

结果证明这是一个CSS问题。每当鼠标悬停在元素上时，CSS会使用:hover选择器在元素上添加一个box-shadow。这导致边框增加并导致列表改变大小。当我删除box-shadow时，问题消失了。这不是Chrome的问题。

- Ray

Answer 2

我看到你已经解决了你的问题，但我遇到了一个非常类似的问题，当鼠标悬停在列表中的第一个元素上时，Chrome（仅限Chrome）会将列表滚动到顶部。 我没有box-shadow，而是有一个带有一些填充的列表：

.list {
    padding: 0 10px;
}

当悬停在一个列表项上时，会添加负边距和一些填充（原因我记不太清楚）：

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

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

- Jooooooooohn

Answer 3

有时候“非悬停”CSS缺少一些信息；而“悬停”CSS则指定了这些额外的信息。请确保所有在“悬停”CSS中指定的信息（如“top:”）也在“非悬停”CSS中有对应的条目。

- Nathan