我在这个问题上花了很多时间,但似乎找不到解决方法。我正在尝试创建一个带有固定标题的表格,该表格可以水平和垂直滚动。但是,我偶然发现了一个我无法解释的非常奇怪的错误。
这个想法很简单。表格位于 scrollable
父级内,父级位于绝对定位的 container
内。表格标题标签放置在 span
元素内,并且绝对位于顶部。当 scrollable
元素滚动时,使用 Javascript 将使用 css 转换移动 span
元素。以下是所用代码的示例代码。
HTML:
<div class="container">
<div class="scrollable">
<table>
<thead>
<tr>
<th><span>Column 1</span></th>
...
</tr>
</thead>
<tbody>
<tr>
<td>Table cell content</td>
...
</tr>
</table>
</div>
</div>
Javascript:
$('.scrollable').on('scroll', function() {
scrollX=$(this).scrollLeft();
$(this).find('th span').attr('style', 'transform:translateX(' + -scrollX + 'px)');
})
下面是一段代码: https://jsfiddle.net/rts4gd5x/
代码在我测试的所有浏览器(ie11,即 edge、chrome、safari)中都可以正常工作,但仅在 Firefox 中我遇到了以下问题。
如果您滚动 scrollable
元素然后调整窗口大小,则 span
元素的位置会出现异常,我无法确定是什么在困扰它。从零滚动调整大小,然后滚动正常工作。
我已经尝试了所有我能想到的方法,将 transform:translateZ(0)
添加到父级,添加 min-width
等,但我尝试过的 hack 都没有用.在 span
元素上使用 fixed
定位可以调整以在这个简化的布局上工作,但我正在处理的实际布局需要 absolute
定位跨度。该解决方案的所有其他浏览器都按预期工作。
最佳答案
我尝试了几种方法在调整大小时进行刷新,但没有成功,所以这里是另一个选项,我使用 margin-left
代替。
同样,Firefox 的行为与其他浏览器不同,所以通过一个简单的浏览器检测(抱歉那个,仅用于此演示,建议以更正确的方式执行此操作)我让它工作
$('.scrollable').on('scroll', function() {
scrollX=$(this).scrollLeft();
// Firefox
if (!(window.mozInnerScreenX == null)) {
$(this).find('thead').attr('style', 'margin-left: ' + -scrollX + 'px');
// the rest
} else {
$(this).find('th span').attr('style', 'margin-left: ' + -scrollX + 'px');
}
})
.container {
position:absolute;
top:20px;
right:20px;
left:20px;
height:200px;
padding-top:40px;
overflow:hidden;
}
.scrollable {
width:100%;
height:100%;
overflow-x:auto;
background:white;
}
table {
width:100%;
text-align:left;
}
table th span {
position:absolute;
top:0;
border-left:1px solid #ccc;
display:block;
width:100%;
line-height:40px;
background:#fff;
margin-left:-1px;
}
table td {
white-space:nowrap;
border-left:1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="scrollable">
<table>
<thead>
<tr>
<th><span>Column 1</span></th>
<th><span>Column 2</span></th>
<th><span>Column 3</span></th>
<th><span>Column 4</span></th>
<th><span>Column 5</span></th>
<th><span>Column 6</span></th>
<th><span>Column 7</span></th>
<th><span>Column 8</span></th>
<th><span>Column 9</span></th>
<th><span>Column 10</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
</tr>
<tr>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
</tr>
<tr>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
</tr>
<tr>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
</tr>
<tr>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
</tr>
<tr>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
</tr>
<tr>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
</tr>
<tr>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
</tr>
<tr>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
</tr>
<tr>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
<td>Table cell content</td>
</tr>
</tbody>
</table>
</div>
</div>
关于javascript - 调整窗口大小时,转换后的元素不遵守 Firefox 上的绝对位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43641865/