修復了標題表，在單擊div滾動條圖標點擊時使用IE11（Internet Explorer）中的Jquery閃爍滾動。
[英]Fixed header Table, on scroll using Jquery flickers in IE11 (internet explorer) on click of div scroll bar icon click.
問題描述
固定標題表____當使用定位時點擊ie11中的滾動條圖標閃爍我不能改變結構，因為它是動態來自不同的來源並進入表體結構
<tbody><tr></tr><tr></tr></tbody>
這里是附帶的小提琴工作正常鉻，但當我檢查，即當點擊div垂直滾動條下方或上方圖標時它可怕地閃爍
任何Css或html解決方案也是可以接受的，直到html結構沒有變化
DEMO Js Fiddle演示 JQUERY
$(document).ready(function() {
$('#theDiv').on('scroll', function () {
$('#headerRow td,#headerRow th').css({'position':'relative','background':'red','top':$('#theDiv').scrollTop()-1});
});
});
5 個解決方案
解決方案1
1 2017-06-14 06:35:32
首先我們將#theDiv包裝在#theDivWrap （使用jQuery）並使用css來設置它...
我們的想法是將標題行復制到通過JS附加到#theDivWrap的新div中
現在循環遍歷表格標題元素並創建一個基於div的類似樣式標題，它將來到表格並被添加到#theDivWrap並永遠保留在那里甚至滾動，因為換行不會溢出自動...
https://jsfiddle.net/5dqnumh6/39/
調整.headerRow負邊距以滿足您的需求;）
解決方案2
1 2017-06-15 09:13:37
解決方案3
0 2017-06-09 23:54:14
這已被注意到IE11錯誤，根據2014年的其他SO問題 ，在以下條件下顯示：
滾動時，有三件事可能導致IE 11閃爍/波動/延遲固定位置元素：
- 如果你有“溢出：自動;” 在父容器元素上，刪除它。
- 刪除背景附件：固定; 來自固定位置元素。
從固定位置元素中刪除border-radius（僅限移動IE）。
（@Adamy接受的回答）
好吧，從代碼中刪除自動溢出會消除整個目的，所以這不是最好的解決方案，其他的不適用。 然而，似乎有用的（根據此MS Connect錯誤 ）是一些HTML更改，分隔標題行，並將自定義滾動功能添加到實際的表體。 這個JsFiddle頁面（由響應MS錯誤的人提供）有一個工作示例：
https://jsfiddle.net/84y0vtyx/
（僅包括帶有相關注釋的部分示例。完整說明需要查看JsFiddle示例。）
/* Only WinIE will fire this function. All other browsers scroll the TBODY element and not the DIV */
/* This is to hide the SELECT elements from scrolling over the fixed Header. WinIE only. */
/* toggleSelectBoxes added on 2005-01-28 */
/* Terence Ordona, portal[AT]imaputz[DOT]com */
window.onload = function() { addIEonScroll(); }
解決方案4
0 2017-06-14 21:06:07
嗨，這是根據您的評論我的更新。 我從你的js Fiddle復制了HTML部分，只是將這個樣式標記添加到表格div的上面，它在microsoft edge和其他瀏覽器中完美地運行，不需要Jquery：
<style>
#headerRow
{
position: fixed !important;
top:0px;
background:Red;
}
</style>
////舊
我很抱歉，你提到你不能改變下來的html表結構，但是請看下面的舊答案，我沒有考慮這個問題。 您是否可以考慮使用css遍歷下來的固定表並將固定位置應用於頂部標題行？ 我已經讀過你可以給表行提供一個固定的位置和一個背景顏色，這樣它就可以保持固定，背景可以防止文本重疊如何使表格行固定在頂部
您可以使用css選擇表的頂行：Css：
table tr:first-child
{
position: fixed;
top:0px;
background:#FFF;
}
///舊答案：
我可以建議您忘記使用文檔滾動事件，如果它是帶有溢出滾動的div或固定位置，只要在窗口滾動時保持固定，則只創建具有絕對位置的標題。 您可以指定列的寬度，以便固定標題排列。 所以沿着這些方向（我只是在手機上打字）：
<table style="position:fixed; width:100% ">
<tr>
<th width="50%">
Test1
</th>
<th width="50%">
Test2
</th>
</tr>
</table>
<table style="margin-top:25px; width:100% ">
<tr>
<td width="50%">
a
</td>
<td width="50%">
b
</td>
</tr>
<tr>
<td width="50%">
c
</td>
<td width="50%">
d
</td>
</tr>
</table>
特別是如果我們在這里談論跨瀏覽器兼容性 - 更簡單和最基本的html / css實現更好。 Css為我們提供了一個固定的課程。 沒有必要使用jquery來觀看您的文檔滾動。
解決方案5
0 2017-06-16 14:06:06
我用這個我的網站：
只需將其加載到頁面的<head></head>部分，它將浮動該頁面上加載的任何表的標題。 它是跨瀏覽器的，無需其他技巧即可完成工作，只需即插即用。
在帶有抖動元素的ie11問題上使用jquery滾動
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.