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

【问题标题】：Chrome: mouse hover on some elements causes vertical scrollbar to jump to the topChrome：鼠标悬停在某些元素上会导致垂直滚动条跳到顶部
【发布时间】：2020-11-03 02:18:39
【问题描述】：

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

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

padding: 0.75em 2em 1.75em 2em;

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

【问题讨论】：

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

标签： css google-chrome

【解决方案1】：

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

【讨论】：

【解决方案2】：

我看到您已经解决了您的问题，但我刚刚遇到了一个非常相似的问题，当列表中的第一个元素悬停时，Chrome（并且只有 Chrome）会将列表滚动到顶部。我没有 box-shadow 而是有一个带有一些填充的列表：

.list {
    padding: 0 10px;
}

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：