表格粘列滚动错误 Chrome

Posted 2023-03-06

【中文标题】表格粘列滚动错误 Chrome

【英文标题】：Table sticky columns scroll bug Chrome

【发布时间】：2016-12-01 18:17:24

【问题描述】：

我创建了一个表格，其中有几个固定列，其余列在滚动。这是使用包装器 div 并在固定列上设置绝对位置和负左边距来完成的。

它是复杂数据表的一部分，所以我很难在 jsfiddle 中重新创建，但这里有一个链接：http://rateshopper.error404.ro/table.html

问题是当您只是玩滚动然后向左移动光标时。固定的列有时会跳出位置。取消检查和重新检查检查器中留下的边距可以修复它。我不知道为什么会这样。

这是 Chrome 中的视频：http://rateshopper.error404.ro/bug_chrome.mov

任何想法或帮助将不胜感激！

【问题讨论】：

您的视频链接已损坏。

我无法在 Windows 上使用 Chrome 和 FF 重现此问题（并且无法观看您的视频）。您使用的是哪些版本？哪种分辨率？

我不确定多个 tbody 是否是有效的 html，可能是浏览器有问题。

@CarolMcKay 它验证但它肯定是非常规的。

我修复了损坏的视频网址

【参考方案1】：

编辑：

更好的解决方法：

.col-lg-10 
    float: right;

在#seriesTableWrapper 的父元素上设置浮点数可防止其子元素发生边距折叠。

以下是关于边距折叠的必读内容： http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

这篇文章在防止边距崩溃的方法方面有点过时，但它解释了为什么以及如何发生这种情况。

防止边距折叠的更现代方法：How to disable margin-collapsing?

---

找到解决办法

变化：

#seriesTableWrapper 
    margin-left: *something*;

到：

#seriesTableWrapper 
    padding-left: *something*;

可能是边距崩溃问题，在某些情况下边距可能会崩溃。遗憾的是，滚动条现在延伸到整个宽度。

由于没有垂直滚动，您可以在旁边制作一个不滚动的表格和一个水平滚动的表格。如果有垂直滚动，您可以将这两个表都包装在一个带有溢出的 div 中：auto;

【参考方案2】：

通过大幅调整窗口大小，我能够重现您在上面显示的外观。我怀疑在调整大小时，您用来设置初始左边距的任何内容都返回 null。为左边距设置一个最小值可能会解决这个问题。如果您可以提供计算和应用这些位置的 javascript，我将很乐意帮助您进行编辑。

【讨论】：

您是否尝试用计算值替换margin-left auto？

我在第 662 行设置了 margin-left。在第 608 行我只是重置了它。左边距的设置是在页面加载时完成的。在我滚动该 div 并将光标移到外面后，单元格会跳到 Chrome 上（并且仅在 1 个特定的 Macbook 上，其他的可以）。但是，有趣的是，通过检查器，我可以看到正确的值，如果我选中和取消选中，它会回到正确的渲染。

不是很明显，但是……Macbook 的 Chrome 版本更新了吗？

很遗憾。 v52.0.2743.116，在我的 2013 Macbook 上，我有相同的版本，最低版本号。当然，我们遇到问题的 Macbook 是我们的客户 Macbook :-(

试过检查它的扩展吗？

【参考方案3】：

这对我来说很好用，它似乎在其他人的计算机上也可以正常工作，但它似乎只发生在一个特定的 macbook 上，尽管它是你创建它的 macbook，我想......

如果是这种情况，那么您需要清除浏览器缓存，尽管它很可能是本地缓存，但它仍然存储缓存。试试这个...

打开 Chrome。 在浏览器工具栏上，点击三点图标 。 点击历史记录，然后点击清除浏览数据。 在“清除浏览数据”下，选中“Cookie 和站点数据”和“缓存的图像和文件”复选框。 使用顶部的菜单选择要删除的数据量。 ... 点按清除浏览数据。

尝试清除“一切”，我之前在开发过程中遇到过类似的问题，这是因为我找到了缓存，我不知道这是否会解决你的问题，但我认为这将是我的第一个地方看。

刚刚阅读关于它是您的客户端 Mac 的最后评论，我仍然建议擦除缓存，并按照最后评论中的建议检查他可能拥有的扩展名

【讨论】：

我已经尝试了所有这些，禁用扩展，甚至重新安装 Chrome。没有任何帮助。

好吧，这不是批评的意思，有时我们在认真看技术的时候会忽略简单的东西