html - 如何防止在 IE 中出现而在 Firefox 中不出现的页面闪烁？

标签 html css internet-explorer flicker

如果我在重新提交页面之前的滚动位置向右滚动，我有一个页面依赖于 2d 中的翻译将表格移动到屏幕的右侧。

我要捕捉的效果是表格排序时向右滚动的效果(固定表头，限高正文，溢出滚动)。

Firefox，出乎意料的是Edge不闪，我用这个效果只有IE闪

如何抑制我的 CSS 转换的伪影以消除这种烦人的 IE 页面闪烁？

这与我之前使用提供的代码创建的帖子相关。

Fixed Header Scrollable Table - How to preserve horizontal scroll position using css jquery on page loads

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> &#9650;</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">
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
                    <!--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>&nbsp;</nobr></td>
                    <td style="min-width:449.86px; max-width:449.86px">
                    <nobr>&nbsp;</nobr></td>
                    <td style="min-width:105.34px; max-width:105.34px">
                    <nobr>&nbsp;</nobr></td>
                    <td style="min-width:123.16px; max-width:123.16px">
                    <nobr><span>&nbsp;</span></nobr></td>
                    <td style="min-width:123.16px; max-width:123.16px">
                    <nobr><span>&nbsp;</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>&nbsp;</span></nobr></td>
                    <td style="min-width:111.28px; max-width:111.28px">
                    <nobr><span class="">&nbsp;</span></nobr></td>
                    <td style="min-width:99.4px; max-width:99.4px">
                    <nobr><span class="">&nbsp;</span></nobr></td>
                    <td style="min-width:99.4px; max-width:99.4px">
                    <nobr><span class="">&nbsp;</span></nobr></td>
                    <td style="min-width:123.16px; max-width:123.16px">
                    <nobr><span class="">&nbsp;/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>&nbsp;</nobr></td>
                    <td style="min-width:93.46px; max-width:93.46px">
                    <nobr>&nbsp;</nobr></td>
                    <td style="min-width:93.46px; max-width:93.46px">
                    <nobr>&nbsp;</nobr></td>
                    <td class='sort' style=
                    "min-width:93.46px; max-width:93.46px">
                    <nobr>&nbsp;</nobr></td>
                </tr>
            </tbody>
        </table>
    </div>
<script>
$(document).ready(function() {
    setScroll('summary_header', 'summary_table');
});
</script>

最佳答案

因为我无法推断出 IE 的版本，所以我假设它是 >10，所以如果你想更好地控制你的动画，我建议使用 requestAnimationFrame。

关于html - 如何防止在 IE 中出现而在 Firefox 中不出现的页面闪烁？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39312873/

上一篇：html - IE 在菜单子(monad)项上创建不必要的偏移量

下一篇：html - Shiny 的段落内嵌套链接有不需要的空格

相关文章：

html - iphone 中的 Gmail 应用忽略 "font-size"的 html 邮件并将其更改为 13px

html - 如何在 Aptana Studio 3 中禁用 Html/CSS 代码辅助

html - CSS 位置 - 部分重叠的 div

CSS - div inside div，IE 中没有背景色

html - Firefox 中的页面布局不同

javascript - 获取上传的文件/图像的名称

javascript - 使用 jquery 更改元素的选定值

CSS::before 和::after 动画到按钮的中心，但只有::after 结束在中心

javascript - onReadyStateChange 未在 IE 中针对 XHR 请求触发

html - 我可以在 Internet Explorer 上通过 Windows Phone 上传照片吗？

©2024 IT工具网  联系我们