表粘滞列滚动问题Chrome

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

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

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

这里有一个视频在Chrome：http://rateshopper.error404.ro/bug_chrome.mov

任何意见或帮助将不胜感激！

来源

2016-07-27 Illes Peter

您的视频链接已损坏。 –

我无法使用Chrome和FF在Windows上重新创建此问题（并且无法观看您的视频）。你正在使用哪些版本？哪个分辨率？ – mxlse

我不确定多个tbody是否为有效的html，也许浏览器有问题。 –

我能够通过大幅调整窗口重现上面显示的外观。我怀疑，在调整大小时，无论您使用什么设置，您的初始左边距都将返回null。设置左边距的最小值可能会解决此问题。如果您可以提供计算和应用这些职位的JavaScript，我会很乐意协助您编辑它。

来源

2016-08-06 11:09:46 JBartus

这是JS http://rateshopper.error404.ro/js/tables.js –

你是否尝试更换保证金-left auto with a calculated value？ – JBartus

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

-1

那么这工作很好，我的目的，它出现在其他人的计算机上工作正常，但它似乎只发生在一个特定的MacBook，虽然它会是您创建的MacBook，我想...

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

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

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

刚刚看了一下它是你的客户的Mac最后的评论，我还是建议擦缓存，并检查扩展他可能在最后的评论所说

来源

2016-08-19 13:39:30 Ricky

我已经尝试了所有这些，禁用扩展，甚至重新安装Chrome没什么帮助的 –

那么它并不是要批评，有时候我们在看技术性的东西时看过简单的东西 – Ricky

编辑：

更好的解决办法：

.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;

来源

2016-08-23 19:16:46 seahorsepip

表粘滞列滚动问题Chrome

回答

相关问题