表粘性列滚动错误Chrome

时间:2016-07-27 16:00:42

标签: jquery css google-chrome

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

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

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

以下是Chrome中的视频:http://rateshopper.error404.ro/bug_chrome.mov

非常感谢任何想法或帮助!

3 个答案:

答案 0 :(得分:2)

编辑:

更好的解决方法:

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

可能是保证金崩溃问题,在某些情况下利润可能会崩溃。遗憾的是,滚动条现在在整个宽度上延伸。


由于没有垂直滚动,你可以创建一个没有滚动的表和一个旁边有水平滚动的表。如果有垂直滚动,你可以用溢出:auto;

将这两个表包装在一个div中

答案 1 :(得分:1)

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

答案 2 :(得分:-1)

嗯,这在我的最终工作正常,它似乎在其他人的计算机上正常工作,但它似乎只发生在一个特定的macbook上,虽然它是你创建它的macbook,我想...... / p>

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

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

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

刚刚阅读关于它作为您的客户Mac的最后评论,我仍然建议擦除缓存,并按照上一条评论中的建议检查他可能具有的扩展名