Исправлена ​​таблица заголовков в прокрутке с использованием JQuery мерцания в IE11 (Internet Explorer) при щелчке мышью на значке прокрутки div.

ТАБЛИЦА ФИКСИРОВАННОГО ЗВУКА ____При нажатии на значок полосы прокрутки в ie11 мерцает при использовании позиционирования, поскольку я не могу изменить структуру, поскольку она динамически исходит из разных источников и попадает в структуру тела таблицы.

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

вот скрипка прилагается отлично работает в хроме, но когда я проверяю, то есть он мерцает ужасно, когда нажимает на div вертикальную полосу прокрутки ниже или над значком

Любое решение Css или html также приемлемо до тех пор, пока не будет изменений в структуре html

DEMO Js Fiddle Demo введите описание изображения здесь  Jquery

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

ОТВЕТЫ

Ответ 1

Сначала мы завершаем #theDiv в #theDivWrap (используя jQuery) и используем css для его стиля...

Идея состоит в том, чтобы дублировать строку заголовка в новый div, добавленный в #theDivWrap через JS

Теперь перейдем к элементам заголовка таблицы и создадим аналогичный заголовок, основанный на div, который перейдет в таблицу и будет добавлен к #theDivWrap и останется там навсегда даже при прокрутке, потому что wrap не переполняется автоматически...

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

Отрегулируйте нижнюю границу минус .headerRow в соответствии с вашими потребностями;)

Ответ 2

Так как Ie не поддерживает свойство переполнения для элементов группы таблицы. Поэтому мы можем добавить обходное решение для поддержки требуемого поведения. Добавьте этот css к своей скрипке и попробуйте, это сработает.

tbody{display:block;height:auto;}

Это заставит ваше мерцание уйти, т.е. более старые версии. Хотя его взломать, чтобы он работал, но нет другого чистого способа css. Для получения дополнительной информации и объяснения вы можете прочитать ссылку . Обновленная скрипка здесь. Но, как вы сказали, мерцание не исчезает. Обходной путь существует, но он требует изменения в настройках. Перейдите в раздел "Интернет", перейдите к расширенному и прокрутите страницу вниз до тех пор, пока не увидите раздел просмотра и снимите флажок ", чтобы включить плавную прокрутку" . Но я не знаю, соответствует ли это вашим требованиям или нет.

Ответ 3

Было отмечено, что это ошибка IE11 и в соответствии с этот другой вопрос SO с 2014 года появляется при следующих условиях:

Три вещи могут вызвать мерцание/прерывание IE 11 для фиксированного элемент позиции при прокрутке:

  • Если у вас есть "overflow: auto;" на элемент родительского контейнера, убери это.
  • Удалить фоновую привязку: исправлено; из фиксированного положения элемент.

  • Удалите граничный радиус из элемента фиксированной позиции (мобильный IE).

    (Принятый ответ by @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

Привет, это мое обновление, основанное на вашем комментарии. Я скопировал часть HTML из вашего js Fiddle и просто добавил этот тег стиля к приведенному выше таблице div, и он отлично работает на грани microsoft и других браузерах без необходимости JQuery:

<style>

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

</style>

////OLD

Я извиняюсь, как вы уже упоминали, что вы не можете изменить структуру таблицы 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

Я использую этот сайт:

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

Просто загрузите его в свой раздел <head></head> страницы, и он будет плавать в заголовке любой таблицы, загруженной на эту страницу. Это кросс-браузер и выполняет свою работу без дополнительных трюков, просто подключи и играй.