本文介绍了我如何防止IE中出现的Firefox中没有出现页面闪烁?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



如果页面重新提交前的滚动位置滚动到右侧,我有一个页面依赖于2D中的翻译将表格移动到屏幕右侧。 >我试图捕获的效果是在对表格进行排序时滚动到右侧(固定标题,高度有限的正文,溢出滚动)的表格。

Firefox,甚至令人惊讶的是,边缘不闪烁,只有当我使用这种效果IE浏览器闪烁。

我如何抑制我的CSS翻译的工件,以消除这个恼人的IE页面闪烁? / p>

这与我使用提供的代码创建的以前的帖子有关。 $ b



jQuery

 函数setScroll(id_header,id_table)
{
$('div。'+ id_table).on(scroll,function(){//当#center滚动时激活
var left = $('div。'+ id_table).scrollLeft(); //将#center位置保存到var left
$('div。'+ id_header).scrollLeft(left); // set #top to var left
$('#scrollamount')。val(left);
});
$ b $('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表格 $ b

 < div class =summary_header> 
transform:translateX(0px)>
< thead class =header>
< tr>
< th class =editstyle =min-width:34px; max-width:34px>
编辑< / th>
< th style =min-width:34px; max-width:34px>
< a onclick =$('#summaryform')。attr('action','allactionitems.php?orderby = ActionItemID& dir = DESC& load = 1'); #summaryform')提交();>
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')提交();>
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')提交();>
严重性< / 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')提交();>
转让人< / 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')提交();>
所有者< / 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')提交();>
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')提交();>
批准者< / 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')提交();>
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')提交();>
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')提交();>
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')提交();>
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')提交();>
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')提交();>
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')提交();>
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')提交();>
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')提交();>
Category4< / a> &安培;#9650;< / NOBR>< /第>
< / tr>
< / thead>
< / table>
< / div>
< div class =summary_table overflow_tablestyle =overflow-x:hidden>
< table border =1id =summary_tablestyle =transform:translateX(0px)>
< tbody>
< tr class =row_evenid =row1>
< td class =editstyle =min-width:34px; max-width:34px>
& nbsp; &安培; NBSP; &安培; NBSP; &安培; NBSP; &安培; NBSP;
<! - input type =submitvalue =Editstyle =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 I的版本将假定它> 10,所以如果你想精细控制你的动画,我推荐使用 requestAnimationFrame


I have a page that relies on translation in 2d to move a table to the right of the screen if my scroll position before page resubmit is scrolled to the right.

The effect I am trying to capture is a table that is scrolled to the right when sorting the table (fixed header, limited height body, overflow scroll).

Firefox, even surprisingly Edge does not flicker, only IE flickers when I use this effect.

How do I suppress the artifacts of my CSS translation to eliminate this annoying IE page flicker?

This is related to a previous post I created with code provided.

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 Table

 <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>
解决方案

Since I couldn't deduce the version of IE I will assume it to be >10 so if you want fine control over your animations I recommend using requestAnimationFrame.

这篇关于我如何防止IE中出现的Firefox中没有出现页面闪烁?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-15 11:00