如果我在页面重新提交之前的滚动位置向右滚动，我有一个页面依赖于2d中的翻译将表格移动到屏幕右侧。
我想要捕获的效果是一个在排序表时向右滚动的表（固定标题，有限高度的主体，溢出滚动）。
Firefox，甚至令人惊讶的是Edge没有闪烁，只有当我使用此效果时IE才会闪烁。
如何抑制CSS翻译的工件以消除这种恼人的IE页面闪烁？
这与我使用提供的代码创建的上一篇文章有关。
的jQuery
function setScroll(id_header, id_table)
{
$('div.'+id_table).on("scroll", function(){ //activate when #center scrolls
var left = $('div.'+ id_table).scrollLeft(); //save #center position to var left
$('div.'+id_header).scrollLeft(left); //set #top to var left
$('#scrollamount').val(left);
});
$('table#'+ id_table).attr("style", "transform:translateX(0px)");
$('table#'+ id_header).attr("style", "transform:translateX(0px)");
$('div.'+ id_table).scrollLeft($('#scrollamount').val());
rows = $('#summary_table tr').length;
if(rows > 1)
{
$('div.'+ id_table).attr("style", "overflow-x: scroll; overflow-y: scroll; max-height: 250px !important");
}
else if(rows == 1)
{
$('div.overlay div.'+ id_header).attr("style", "overflow-x: hidden; overflow-y: none; width: 783px !important");
$('div.overlay div.'+ id_table).attr("style", "overflow-x: scroll; overflow-y: none; width: 783px !important");
}
$('div.'+ id_header).scrollLeft($('#scrollamount').val());
}
HTML表格
<div class="summary_header">
<table border="1" id="summary_header" style=
"transform:translateX(0px)">
<thead class="header">
<tr>
<th class="edit" style="min-width: 34px; max-width:34px">
Edit</th>
<th style="min-width:34px; max-width:34px">
<nobr><a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=ActionItemID&dir=DESC&load=1');$('#summaryform').submit();">
ID</a> <span style=
'display: inline-block; width: 13'></span></nobr></th>
<th style="min-width:449.86px; max-width:449.86px">
<nobr><a onclick=
"$('#summaryform').attr('action', 'allactionitems.php?orderby=ActionItemTitle&dir=DESC&load=1');$('#summaryform').submit();">
ActionItemTitle</a> <span style=
'display: inline-block; width: 13'></span></nobr></th>
<th style="min-width:105.34px; max-width:105.34px">
<nobr><a onclick=
"$('#summaryform').attr('action', 'allactionitems.php?orderby=Criticality&dir=DESC&load=1');$('#summaryform').submit();">
Criticality</a> <span style=
'display: inline-block; width: 13'></span></nobr></th>
<th style="min-width:123.16px; max-width:123.16px">
<nobr><a onclick=
"$('#summaryform').attr('action', 'allactionitems.php?orderby=Assignor&dir=DESC&load=1');$('#summaryform').submit();">
Assignor</a> <span style=
'display: inline-block; width: 13'></span></nobr></th>
<th style="min-width:123.16px; max-width:123.16px">
<nobr><a onclick=
"$('#summaryform').attr('action', 'allactionitems.php?orderby=Owner&dir=DESC&load=1');$('#summaryform').submit();">
Owner</a> <span style=
'display: inline-block; width: 13'></span></nobr></th>
<th style="min-width:129.1px; max-width:129.1px">
<nobr><a onclick=
"$('#summaryform').attr('action', 'allactionitems.php?orderby=AltOwner&dir=DESC&load=1');$('#summaryform').submit();">
AltOwner</a> <span style=
'display: inline-block; width: 13'></span></nobr></th>
<th style="min-width:123.16px; max-width:123.16px">
<nobr><a onclick=
"$('#summaryform').attr('action', 'allactionitems.php?orderby=Approver&dir=DESC&load=1');$('#summaryform').submit();">
Approver</a> <span style=
'display: inline-block; width: 13'></span></nobr></th>
<th style="min-width:111.28px; max-width:111.28px">
<nobr><a onclick=
"$('#summaryform').attr('action', 'allactionitems.php?orderby=AssignedDate&dir=DESC&load=1');$('#summaryform').submit();">
AssignedDate</a> <span style=
'display: inline-block; width: 13'></span></nobr></th>
<th style="min-width:99.4px; max-width:99.4px">
<nobr><a onclick=
"$('#summaryform').attr('action', 'allactionitems.php?orderby=DueDate&dir=DESC&load=1');$('#summaryform').submit();">
DueDate</a> <span style=
'display: inline-block; width: 13'></span></nobr></th>
<th style="min-width:99.4px; max-width:99.4px">
<nobr><a onclick=
"$('#summaryform').attr('action', 'allactionitems.php?orderby=ECD&dir=DESC&load=1');$('#summaryform').submit();">
ECD</a> <span style=
'display: inline-block; width: 13'></span></nobr></th>
<th style="min-width:123.16px; max-width:123.16px">
<nobr><a onclick=
"$('#summaryform').attr('action', 'allactionitems.php?orderby=CompletionDate&dir=DESC&load=1');$('#summaryform').submit();">
CompletionDate</a> <span style=
'display: inline-block; width: 13'></span></nobr></th>
<th style="min-width:99.4px; max-width:99.4px">
<nobr><a onclick=
"$('#summaryform').attr('action', 'allactionitems.php?orderby=ClosedDate&dir=DESC&load=1');$('#summaryform').submit();">
ClosedDate</a> <span style=
'display: inline-block; width: 13'></span></nobr></th>
<th style="min-width:93.46px; max-width:93.46px">
<nobr><a onclick=
"$('#summaryform').attr('action', 'allactionitems.php?orderby=Category1&dir=DESC&load=1');$('#summaryform').submit();">
Category1</a> <span style=
'display: inline-block; width: 13'></span></nobr></th>
<th style="min-width:93.46px; max-width:93.46px">
<nobr><a onclick=
"$('#summaryform').attr('action', 'allactionitems.php?orderby=Category2&dir=DESC&load=1');$('#summaryform').submit();">
Category2</a> <span style=
'display: inline-block; width: 13'></span></nobr></th>
<th style="min-width:93.46px; max-width:93.46px">
<nobr><a onclick=
"$('#summaryform').attr('action', 'allactionitems.php?orderby=Category3&dir=DESC&load=1');$('#summaryform').submit();">
Category3</a> <span style=
'display: inline-block; width: 13'></span></nobr></th>
<th style="min-width:93.46px; max-width:93.46px">
<nobr><a onclick=
"$('#summaryform').attr('action', 'allactionitems.php?orderby=Category4&dir=DESC&load=1');$('#summaryform').submit();">
Category4</a> ▲</nobr></th>
</tr>
</thead>
</table>
</div>
<div class="summary_table overflow_table" style="overflow-x:hidden">
<table border="1" id="summary_table" style="transform:translateX(0px)">
<tbody>
<tr class="row_even" id="row1">
<td class="edit" style="min-width: 34px; max-width:34px">
<!--input type="submit" value="Edit" style="width:60;height:20; border:none;font-weight: bold" /-->
</td>
<td style="min-width:34px; max-width:34px">
<nobr> </nobr></td>
<td style="min-width:449.86px; max-width:449.86px">
<nobr> </nobr></td>
<td style="min-width:105.34px; max-width:105.34px">
<nobr> </nobr></td>
<td style="min-width:123.16px; max-width:123.16px">
<nobr><span> </span></nobr></td>
<td style="min-width:123.16px; max-width:123.16px">
<nobr><span> </span></nobr></td>
<td style="min-width:129.1px; max-width:129.1px">
<nobr><span></span></nobr></td>
<td style="min-width:123.16px; max-width:123.16px">
<nobr><span> </span></nobr></td>
<td style="min-width:111.28px; max-width:111.28px">
<nobr><span class=""> </span></nobr></td>
<td style="min-width:99.4px; max-width:99.4px">
<nobr><span class=""> </span></nobr></td>
<td style="min-width:99.4px; max-width:99.4px">
<nobr><span class=""> </span></nobr></td>
<td style="min-width:123.16px; max-width:123.16px">
<nobr><span class=""> /span></nobr></td>
<td style="min-width:99.4px; max-width:99.4px">
<nobr><span class=""></span></nobr></td>
<td style="min-width:93.46px; max-width:93.46px">
<nobr> </nobr></td>
<td style="min-width:93.46px; max-width:93.46px">
<nobr> </nobr></td>
<td style="min-width:93.46px; max-width:93.46px">
<nobr> </nobr></td>
<td class='sort' style=
"min-width:93.46px; max-width:93.46px">
<nobr> </nobr></td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
setScroll('summary_header', 'summary_table');
});
</script>
答案 0 :(得分：2)
由于我无法推断IE的版本，我会认为它大于10，所以如果你想要对你的动画进行精细控制我建议使用requestAnimationFrame。