修复了标题表，在 IE11（Internet Explorer）中使用 Jquery 滚动时在单击 div 滚动条图标单击时闪烁。答案

【问题标题】：Fixed header Table, on scroll using Jquery flickers in IE11 (internet explorer) on click of div scroll bar icon click.修复了标题表，在 IE11（Internet Explorer）中使用 Jquery 滚动时在单击 div 滚动条图标单击时闪烁。
【发布时间】：2017-11-08 22:08:34
【问题描述】：

FIXED HEADER TABLE ____当点击 ie11 中的滚动条图标时使用定位时会闪烁，因为我无法更改结构，因为它动态来自不同的来源并进入表体结构

<tbody><tr></tr><tr></tr></tbody>

这是附加的小提琴在 chrome 中可以正常工作，但是当我签入时，即当单击图标下方或上方的 div 垂直滚动条时，它会可怕地闪烁

任何 Css 或 html 解决方案也是可以接受的，除非 html 结构没有变化

演示Js Fiddle Demo 查询

   $(document).ready(function() {
$('#theDiv').on('scroll', function () { 
                $('#headerRow td,#headerRow th').css({'position':'relative','background':'red','top':$('#theDiv').scrollTop()-1});
});
    });

【问题讨论】：

html 有什么办法吗？不改变表结构？
闪烁问题依然存在
我讨厌 IE 浏览器。这是一个浏览器问题

标签： javascript jquery html css

【解决方案1】：

首先，我们将#theDiv 包装在#theDivWrap 中（使用jQuery）并使用css 对其进行样式设置...

想法是通过JS将标题行复制到附加到#theDivWrap的新div中

现在循环遍历表格标题元素并创建一个基于 div 的类似样式的标题，该标题将出现在表格上方并添加到 #theDivWrap 之前，并且即使在滚动时也永远停留在那里，因为换行不会自动溢出...

https://jsfiddle.net/5dqnumh6/39/

调整.headerRow 的负边距底部以满足您的需要；）

【讨论】：

只需在 div id '#headerRow 中添加 $('<div/>').addClass('headerRow').css({'width': tableWidth,'position':'relative'}); 就可以了
好吧，选项有限，因为我们无法更改表格的 HTML，请尝试在 #theDiv 上设置 visibility:hidden 内联样式，并在设置重复标题后在 JS 中将其删除...； ) 为避免部分渲染显示...
jsfiddle.net/5dqnumh6/39 试试这个，它会显示原始标题，直到加载新标题;)
两个问题仍然存在。在标题上发出 1 次小闪烁，因为它需要时间，其次我的垂直滚动进入内部，如上面示例中垂直滚动的屏幕截图所示..jsfiddle.net/nadeemmnn2007/5dqnumh6/40
非常感谢您的努力，我们是否可以像我写的那样在顶部不创建新标题的情况下做一些小的事情，好像网络很慢或记录或更多然后加载性能问题会引发

【解决方案2】：

由于 Ie 不支持表组元素的溢出属性。所以我们可以添加一个解决方法来支持所需的行为。将此 css 添加到您的小提琴中并尝试它会起作用。

tbody{display:block;height:auto;}

这将使您的闪烁在旧版本中消失。虽然它是让它工作的黑客，但没有其他纯 css 方式。有关更多详细信息和说明，您可能需要阅读此link。更新的小提琴是here。但正如你告诉我的那样，闪烁不会消失。存在一种解决方法，但它需要更改 ie 设置。转到互联网选项，导航到高级并向下滚动，直到看到浏览部分并取消选中“启用平滑滚动”。但不知道合不合你的要求

【讨论】：

滚动闪烁进入 ie 但点击向上箭头和向下箭头时仍然在 ie 中闪烁
不幸的是，对于 ie，这个 bug 还没有解决。您必须遇到闪烁问题，因为滚动需要时间来更新 ie 中的滚动条转换。您可以删除边框折叠属性以获得更好的视觉表示。我已经更新了我的答案以删除 ie 中的平滑滚动，这将有所帮助，但您必须从 ie 选项手动重置它
我的不幸不能说个人用户为 ie 做设置，一个坏消息是在 ie5 中它的工作原理就像表达式的魅力，而不使用任何 jquery，

【解决方案3】：

这是一个 IE11 错误，根据this other SO question from 2014，在以下情况下会出现：

三件事可能导致 IE 11 闪烁/断断续续/延迟固定滚动时定位元素：

如果您有“溢出：自动；”在父容器元素上，去掉它。

移除背景附件：已修复；从固定位置元素。

从固定位置元素（移动仅限 IE）。

（@Adamy 接受的回答）

好吧，从您的代码中删除自动溢出会带走整个目的，所以这不是最好的解决方案，其他的也不适用。然而，似乎可行的（根据this MS Connect bug）是一些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(); }

【讨论】：

我无法分离结构......就像标题和行内容一样。那是我有问题的地方。因为该代码是在 tbody 中生成的嵌套 jsp 代码

【解决方案4】：

您好，这是我根据您的评论进行的更新。我从你的 js Fiddle 中复制了 HTML 部分，并将这个样式标签添加到表格 div 的上方，它在 microsoft edge 和其他不需要 Jquery 的浏览器中完美运行：

<style>

 #headerRow
 {  
   position: fixed !important;
   top:0px;
   background:Red;
 }

</style>

////旧

很抱歉，正如您所提到的，您无法更改出现的 html 表结构，但是请参阅下面的旧答案，我在没有考虑到这一点的情况下编写了该答案。能不能考虑用css遍历下来的固定表，对最上面的标题行应用一个固定的位置？我已经读到您可以为表格行提供固定位置和背景颜色，以便它保持固定并且背景防止文本重叠How to make table row fixed at the top

您可以使用 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 来查看您的文档滚动。

【讨论】：

请看我的例子，因为它有动态生成的表格结构，而且当使用固定位置时，我看不到内列标题，因为有很多列说 20 列，可见列 10 列休息内水平滚动
你能把小提琴的网址发过来吗
水平滚动时列对齐消失，偶数对齐不匹配

【解决方案5】：

我在我的网站上使用这个：

https://raw.githubusercontent.com/jmosbech/StickyTableHeaders/master/js/jquery.stickytableheaders.min.js

只需将其加载到页面的<head></head> 部分，它就会浮动该页面上加载的任何表格的标题。它是跨浏览器，无需任何额外技巧即可完成工作，即插即用。

【讨论】：