Javascript "бесконечная" прокрутка для конечного контента?

У меня есть много контента для показа на веб-сайте, так что мне нужно использовать "бесконечное" прокручивающее решение, где контент загружается по мере того, как пользователь прокручивается к концу загруженного содержимого. Тем не менее, я точно знаю, сколько данных есть, и я хочу, чтобы у пользователя было некоторое представление об этом. Мне не нравится, как полоса прокрутки делает вид, что вы почти до конца контента, а затем внезапно загружается больше контента, а большой/слайдер находится посреди прокручиваемой дорожки и уже.

Мое запланированное решение - сделать div после того, как текущее содержимое будет огромным, но пустым, а затем сжимать его, когда я загружаю больше контента. Любые лучшие идеи?

ОТВЕТЫ

Ответ 1

Моим окончательным решением было создать таблицу в div, которая имеет полосу прокрутки. Я устанавливаю высоту таблицы на высоту общего количества контента, а первую строку - на высоту части содержимого, которая не просматривается, а следующая строка - это содержимое, просматриваемое в настоящее время.

Затем я использовал процесс, подобный тому, который использовался в видеоиграх с боковой прокруткой, где вы рисуете только то, что видно на экране, или только то, что находится рядом с видимой областью. Я использовал точки маршрутизации, чтобы отслеживать, куда прокручивался пользователь, а затем обновлял видимое содержимое и использовал функции прокрутки jquery, чтобы пользователь оставался на том же месте, которое они просматривали. Таким образом, в любой момент только "ценность страницы" отображается "выше" или ниже текущей области просмотра.

Я должен отметить, что все "контент" на самом деле уже находится в клиентской системе, поэтому загрузка не является проблемой. Проблема для меня заключается в том, что "контент" представляет собой массивную структуру DOM, которая в конечном итоге замедляет работу клиентской системы, если я пытаюсь обрабатывать ее все сразу. Поэтому я только создаю и показываю часть его за раз.

Это приводит к некоторой изменчивости, так как экран становится обновленным и плохой, если вы решите захватить и перетащить полосу прокрутки в нижнюю часть содержимого. Если я выясню что-то лучше, я обновлю это.

UPDATE Я зарегистрировал, как это сделать на моем сайте: http://0xdabbad00.com/2012/11/25/icebuddha-scrolling-javascript-infinite-scrolling-in-a-finite-area/

Ответ 2

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

Проблема заключается в том, что полоса прокрутки не предназначена для поддержки расширения контента. Это, как вы указали, обманчиво для такого контента. Вы можете создать совершенно новую функцию прокрутки, которая предоставляет полную информацию

  • Длина загруженных данных
  • Длина незагруженных данных
  • Если вы загружаете данные архива, вы можете отдельно указать, какая часть загруженных данных является текущими данными.

Цветная полоса прокрутки с зеленым фоном, указывающая, что загружено и текущее, желтый раздел, указывающий, что загружено, но более старые данные, и красную секцию, указывающую, что можно загрузить, поскольку прокрутки пользователя будут делать это довольно хорошо.

Ответ 3

Вы можете вставить незаметный символ в самом конце вашего максимального документа (скажем, с разрешением 15 тыс. пикселей), чтобы полоса прокрутки точно отражала глубину страницы, если это то, что вы имели в виду. Что-то вроде этого...

 document.write('<div style="Position:Absolute; Left:0px; Top:15000px;";>.</div>');