Как изменить стиль видимости CSS для элементов, которых нет на экране?

Question

У меня много данных, помещаемых в <DIV> со стилем overflow: auto. Firefox справляется с этим изящно, но IE становится очень вялым как при прокрутке div, так и при выполнении любого Javascript на странице.

Сначала я думал, что IE просто не может обрабатывать такое количество данных в своей DOM, но потом я провел простой тест, в котором применил стиль visibility: hidden к каждому элементу после первых 100. Они по-прежнему занимают место и занимают много места. полосы прокрутки, чтобы появиться. В IE больше не было проблем с данными, когда я делал это.

Итак, я хотел бы иметь «умный» div, который скрывает все вложенные элементы div, которые в данный момент не видны на экране. Есть ли простое решение для этого или мне нужно иметь бесконечный цикл, который вычисляет расположение полосы прокрутки? Если нет, есть ли какое-то конкретное событие, в которое я могу попасть, где я мог бы это сделать? Существует ли селектор или плагин jQuery, который позволит мне выбрать все элементы, которые в данный момент не видны на экране?

Answer 1

Вы хотите использовать display: none вместо visibility: hidden

Элементы, которые скрыты с использованием видимости: скрытые будут по-прежнему занимать свое место в области просмотра.

Что касается использования "умного" div, то, как вы его описываете. Вас может заинтересовать что-то вроде плагина jQuery autopager .

Answer 2

Мне удалось достичь цели в моем вопросе, но она не принесла значительного прироста производительности в IE. Я переработал всю свою страницу, но вот незаконченный код на тот случай, если кто-то еще захочет сделать что-то подобное и хочет знать, с чего начать:

// Где 'child' = элемент внутри div ('parent'), имеющий overflow: auto style

function isChildOnScreen(child, parent) { 
  var topOfChild = child.offsetTop;
  var bottomOfChild = child.offsetTop + child.offsetHeight;
  var topOfParent = parent.scrollTop;
  var bottomOfParent = parent.scrollTop + parent.offsetHeight;

  var makeVisible = (topOfChild >= topOfParent && topOfChild <= bottomOfParent)
    ||
    (bottomOfChild >= topOfParent && bottomOfChild <= bottomOfParent)
    ||
    (topOfChild < topOfParent && bottomOfChild > bottomOfParent);

  return makeVisible;
}