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>');