Ведение scrollTop при вставке новых разделов над текущими просматриваемыми элементами (без скрещивания)

Здесь один для реальных гениев JQuery UI: у нас очень длинная форма с разделами, загружаемыми по требованию (например, при щелчке по индексу/навигации или при прокрутке рядом с краями текущего раздела).

Когда я загружаю разделы ниже просматриваемого в данный момент раздела, это не влияет на текущую позицию прокрутки (т.е. scrollTop), но когда я вставляю новые разделы выше текущего просматриваемого раздела, он, конечно, подталкивает просмотренный контент вниз.

Нам нужно поддерживать положение scrollTop относительно текущего раздела. Нам также необходимо избегать прыжка/сгибания дисплея при выполнении настроек.

Параметры, которые мы рассматриваем:

  • Загрузите контент и настройте положение scrollTop на высоту загруженного элемента (это, вероятно, сбой плохо, так как изменение DOM потенциально намного медленнее, чем настройка scrollTop).
  • Загрузите новый раздел за кадром, измерьте высоту. Затем вставьте раздел и отредактируйте scrollTop на эту сумму (возможно, все еще сбой из-за обновления DOM).
  • Установите загружаемый раздел на большую фиксированную высоту (например, 100/1000 пикселей) и отрегулируйте scrollTop так, чтобы текущий вид не перемещался. Загрузите содержимое в этот раздел, затем измерьте фактическую высоту содержимого и удалите фиксированную высоту, при этом отрегулируйте scrollTop, чтобы она соответствовала фактической высоте.
  • Не используйте традиционную прокрутку, а создавайте собственный скроллер, который поддерживает собственные относительные смещения и перемещает существующие разделы отдельно, чтобы соответствовать новым. Затем возникает проблема с записью пользовательской замены прокрутки (для чего-то вроде nicescroll, который мы используем).
  • Временно измените положение текущего просматриваемого участка (ов) на абсолютное (положение, вычисленное по смещению экрана), чтобы вывести его из потока. Обновите содержимое родительского прокручивающего окна за ним, а затем снова просмотрите раздел после повторного вычисления нового scrollTop.
  • Что-то еще, о чем мы не думали?

Я хотел бы получить предложения от кого-то, кто действительно должен был решить эту проблему. Важно, чтобы экран не сбой, поэтому следует избегать синхронизации scrollTop с медленным обновлением DOM.

Предложения или комментарии по предлагаемым решениям? Есть ли замена прокрутки, которая сделает это уже?

Если вы не можете его решить, но подумайте, что стоит решить, подумайте о том, чтобы выжить, чтобы я мог наложить на него большую награду!:)

ОТВЕТЫ

Ответ 1

Обновление 4 сентября 13

Вариант 4 оказывается слишком медленным на практике, как только вы должны учитывать такие вещи, как автоматическая прокрутка, чтобы удерживать сфокусированные элементы управления на экране.

Оказывается Вариант 1 будет работать до тех пор, пока вы выполните следующее:

  • Добавьте верхний и нижний наполнители (например, пустые div), чтобы браузер принял большую область (поля не учитываются при автоматической прокрутке браузера), и вы не можете прокручивать ниже scrollTop 0 (в браузерах нет отрицательного scrollTop).
  • При вставке содержимого сначала настройте положение только затронутых элементов (то есть выше или ниже целевой позиции в представлении.
  • После внесения корректировок измените положение всех элементов (путем повторного укладки их из 0) и измените значение scrollTop для соответствия. Если есть только несколько десятков элементов или меньше, это не сгорит, поэтому я настоятельно рекомендую иметь более крупные контейнеры на верхнем уровне (например, разделы), которые нужно прокручивать, а их содержимое остается относительным.

Вариант 1 имеет то преимущество, что он не борется с автоматической автопрокруткой браузера, когда вы меняете фокус (например, вкладку) между элементами. Это оказалось лучшим практическим решением и позволило нам создать "очень длинную" форму, состоящую из десятков динамически загружаемых разделов (загружаемых через навигационные ссылки или через их близость к окну просмотра), и она отлично работает. Конга действительно!

Раннее тестирование:

Изначально мы пошли с опцией 4:. Мы создали собственную прокрутку, и мы размещаем элементы, абсолютно позиционированные, в относительном родителе.

Когда элементы изменяют размер, позиции элемента выше или ниже пересчитываются (в зависимости от того, где они были относительно окна просмотра). Это изменение содержимого может быть вызвано нагрузкой Ajax или ручным изменением размера.

Чтобы использовать ручную прокрутку, мы используем MouseWheel.js, и мы закрываем прокрутку, чтобы экстенты первого и последнего элементов были ограничено верхним и нижним 25% окна просмотра.

Поскольку надстройка JQuery "выстраивается в линию", одна за другой, мы решили назвать ее Конгой.:)