9
Tôi có một trang dựa vào bản dịch trong 2ngày để di chuyển một bảng ở bên phải màn hình nếu vị trí cuộn trước khi gửi lại trang của tôi được cuộn sang phải.Làm cách nào để ngăn trang nhấp nháy trong IE không xuất hiện trong Firefox?
Hiệu ứng tôi đang cố chụp là bảng được cuộn sang phải khi sắp xếp bảng (tiêu đề cố định, thân chiều cao bị giới hạn, cuộn thừa).
Firefox, thậm chí đáng ngạc nhiên Edge không nhấp nháy, chỉ có trình duyệt IE nhấp nháy khi tôi sử dụng hiệu ứng này.
Làm cách nào để ngăn chặn các tạo tác của bản dịch CSS của tôi để loại bỏ trang nhấp nháy gây phiền nhiễu này?
Điều này liên quan đến bài đăng trước tôi đã tạo bằng mã được cung cấp.
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 Bảng
<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>
Bạn có thể cung cấp một số mã, bạn sẽ cần số lượng mã tối thiểu để kết hợp vấn đề mà bạn đang gặp phải mà không có mã nào chúng tôi không thể giúp – Ricky
Vui lòng xem chỉnh sửa – Vahe