Исправлена таблица заголовков в прокрутке с использованием 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 для фиксированного элемент позиции при прокрутке:
Ну, удаление автоматического переполнения из вашего кода устраняет всю цель, поэтому это не лучшее решение здесь, а остальные не применяются. Однако, похоже, что работает (согласно эта ошибка 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> страницы, и он будет плавать в заголовке любой таблицы, загруженной на эту страницу. Это кросс-браузер и выполняет свою работу без дополнительных трюков, просто подключи и играй.
