Улучшаем «бесконечный скроллинг»

[@voff]

Все же, основной минус бесконечного скрола — это не столько отсутствие возможности оценить кол-во информации, сколько невозможность в один клик попасть в середину — конец списка. Щелкнуть на страницу №20 всегда проще чем крутить вниз скролл.

[@kuchumovn]

Попасть на любую страницу можно и здесь: просто подставьте в URL номер нужной вам страницы.
Поскольку человекопонятные URL'ы сейчас являются стандартом, это должно быть годным решением.

[@voff]

Для меня возможно, для вас наверно тоже, для большинства — нет

[@kuchumovn]

Считаю, что пользователю не нужно переходить на номер страницы, если он не гик.
Будет сделан переход по клику.

[@voff]

Чот не могу понять, как вы пришли к такому выводу?

[@kuchumovn]

Хз, уже не помню.

[@MaksimMukharev]

А в чем действительно необходимость переходить на некую конкретную страницу, например 21-ю? Ведь фактически вы не имеете представления о ее содержимом, значит вам в любом случае нужно дойти до нее последовательно. Если же у вас есть некое предположение, что есть некая сортировка, а на 21 странице находится запись, которая как раз должна удовлетворить вашим ожиданиям (по цене, дате, рейтингу, релевантности), то вероятно есть необходимость в иных вариантах категоризации информации.

[@NervousSnake]

20 прочитал, пошел спать, комп выключил. Заново все это листать и вспоминать на чем остановился?
Ну или если инет ужасно тупит. Сидишь крутишь-крутишь, а потом просто все перестало работать т.к. инета нет. Рефрешишь страницу — и опять крутишь до посинения. Не спорю, что это уже могут быть и детали реализации. Но с обычным пейджингом как-то проще и удобнее.

[@MaksimMukharev]

Вы часто смотрите в Гугле 20 страницу при поиске?

С одной стороны я с вами согласен, забыл — нужно запомнить страницу. Но проблема в том, что информация, как правило, в нормальных источниках периодически меняется. Запомните 20 страницу Хабра и утром вы не найдете старых топиков. А если информация действительно идет последовательно — некий архив статей, который читается подряд, то это должна быть либо книга для последовательного чтения, либо набор разделов для нахождения нужных статей.

[@NervousSnake]

Правильно говорите :) Надо использовать это там, где нужно, а не лепить куда попало.
Я только хотела описать варианты, где такая фича неудобна.

[@kuchumovn]

я же решил (и многие уже решили) описанную вами ситуацию путём подстановки номера страницы в url при прокрутке.
смотрите пример или ссылки.

[@freextraz]

В Вашей реализации пользователь должен угадывать по величине скролла сколько всего страниц

[@kuchumovn]

Считаю, что пользователю не нужно переходить на номер страницы, если он не гик.
Будет сделан переход по клику.

[@JDima]

Я на другой минус наткнулся на каком-то сайте с фотографиями. Листаю себе, листаю. Замечаю, что начинает притормаживать. Запускаю taskmgr и вижу, что один из процессов хрома скушал всю доступную для 32-битного процесса память…

[@kuchumovn]

Да да, и это тоже я решал.
На своём сайте пробовал удалять сверху самые ранние результаты, если их выведено слишком много.
А здесь — можно просто перезагрузить страницу, если начнёт тормозить. Итог — продолжите листать оттуда же, где остановились, но старый процесс (в случае хрома) убьётся, и новый, девственно чистый, создастся.

[@Seldon]

помоему большинство скажет что у вас тормозной сайт нежели будет перезагружать страницу каждый раз, или вы крупными буквами на сайте напишите. «Обнови страницу если тормозит»

[@kuchumovn]

Согласен.
Значит ещё один пункт в туду-лист: убирать страницы данных с верха веб страницы, когда данных на веб странице становится слишком много.

[@freextraz]

Для того, чтобы вернуться наверх опять подгружать? Не лучший вариант

[@kuchumovn]

Нормальный вариант.

[@freextraz]

Одни скрыть, другие показать — тормозов еще больше, нет?

[@kuchumovn]

Предложите что-нибудь лучшее

[@Seldon]

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

[@freextraz]

Если проблема заключается в том что разрастается DOM (предположительно). можно попробовать для уменьшения страницы инкапсулировать данные уже запрошенные с сервера в объект, или массив JS, по мере загрузки нового контента удалять старые данные из DOM, но оставлять данные в массиве. что позволит нам быстро обращаться к предыдущим данным, в случае необходимости, и вставлять их в DOM, но при этом мы избежим разрастания страницы.

п.с.: так-то я дизайнер, это имхо

[@AHDPEu]

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

[@RomanKo]

А еще очень здорово делать браузерный поиск по странице.

[@kuchumovn]

Поясните, пожалуйста

[@RomanKo]

Недавно искал комментарий одного человека на фейсбуке. Открыл его ленту, нажал Ctrl F, вбил слово из комментария (которое помнил), и ничего не нашёл — подгружен только один экран текста.

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

[@zolotyh]

Спорить с этим трудно. Но с другой стороны мне очень не часто приходится открывать страницу №20, потому что данные, которые нужно разбить по страницам, как правило, уже отсортированы. Гораздо быстрее поменять условия сортировки чем искать что-то так далеко.

[@hydralien]

ещё одна из проблем, которую (в некоторых случаях) решает бесконечный скроллинг — на стороне сервера нет необходимости знать, сколько всего данных доступно пользователю, достаточно инициализировать поток и выбрать из него «с N по M», прекратив обработку после. в случае ФБ это, мне кажется, может быть актуально.

[@limitium]

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

[@sogologo]

вы примеры посмотрите, особенно первый там явно показан размер всего материала, все прекрасно понятно!

[@neTpyceB]

А можно сделать на полосе справа метки — тыркнул на «стр. 20», и перешёл на неё?

[@kuchumovn]

Хорошая идея.
Добавляю в ТуДу-лист.

[@sefus]

Описание на английском. А в коде переменные на русском. Зачем?

[@kuchumovn]

Начал писать на русском, чисто для фана, но потом подумал, что этот скрипт может заинтересовать кого-то ещё. А поскольку мы живёт в многонациональном мире, то в будущем код будет переведён на английский. Сейчас просто неохота.

[@Seldon]

Я думаю на русском даже комментировать не стоит, писать сам код — что-то новое ) особенно если потом окажется не utf8

[@kuchumovn]

Словил такой глюк: называл файлы по-русски, на винде, и залил на гитхаб.
Оказалось: не дружат русские имена файлов с виндой и гитом.
На Макоси работает нормально.

[@freextraz]

Изменяемый url — все правильно.
Дополнительный скролл в данном виде — нет, он конкурирует с обычным скроллом браузера. +нарушена иерархия. Нравится как это реализовано на www.wdyl.com/#habrahabr. По ссылке скроллинг не бесконечный, но идея правильная.

+хорошо подписывать в самом контенте до какой страницы из скольки дошел пользователь, если нет надобности принудительно задерживать пользователя на сайте.

+Вместо «Ждите...» всегда лучше ставить preloader и конкретно писать что сейчас произойдет «Загрузка новых товаров», «Загрузка новых статей», etc.

— Как вариант исключения «разрыва шаблона» упользователя, совмещать паджинацию с бесконечным скроллингом (как, например, сделано на vk.com (не днем будет упомянут)

[@kuchumovn]

Клёвая у них полоска слева. Раньше не видел.

До какой страницы из скольки — я не люблю цифры, и вообще считаю цифры ненужными в быту. Совершенно ненужными. Никому. Это моё мнение. Лучше показать графически.

Именно вконтакт меня и бесит, когда листаю поиск людей или посты на избранных страницах.

[@freextraz]

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

[@kuchumovn]

Гляну при случае. Что-то раньше не замечал.

[@voff]

Мне, кстати, на vk.com ужасно нравится левая панелька «Наверх». Очень удобное решение для бесконечного скроллинга.

[@freextraz]

Очень полезная вещь не только для бесконечной прокрутки.

[@kuchumovn]

Я пользуюсь клавишей «Home»

[@freextraz]

90% пользователей даже не догадываются про CTRL+F © Dan Russell
Уверен, ситуация с Home среди «обычных» пользователей не лучше

[@kuchumovn]

Прикольно, не знал.

[@Imposeren]

про ctrl-F — убедился по жене, чего уж говорить о «90% пользователей»

[@newpdv]

Очень жаль что они убрали функцию это панельки «Вниз»

[@akzhan]

+1. постоянно помню, чтобы применить, но пока не было случая.

У них она теперь еще функцию «Назад» иногда выполяет. Еще хороша идея полос слева, в контенте и справа при просмотре фото.

[@vvzvlad]

ненавижу ее

[@artishok]

Грамотно сделано здесь — http://demo.lanmediaservice.com/video/#/catalog/page/4, при прокрутке меняется адресная строка и появляется подсказка на какой странице сейчас находишься

Также ВКонакте в теме обсуждения(например, группа «Кубик в кубе»), есть информер с количеством страниц, и при прокрутке показывает на какой странице ты сейчас находишься. Только здесь не меняется адресная строка

[@Seldon]

Ну не знаю по вашему примеру я не особо замечаю страницы ( а пролистав штук 10 и нажав назад меня начинает раздражать что назад — отлистывает страницы, мне хочется на предыдущую, а не вверх по списку. Да ребята поработали и внедрили интересные решения для насущных проблем, но мне привчней стандартное решение

[@kuchumovn]

Хорошо сделали.
Добавил ссылку с статью.

[@freextraz]

Первый пример — хорошо, но лучше такие подсказки делать слева. И писать, естественно «Страница 5». Пользователь не должен думать.

[@freextraz]

Ответ на habrahabr.ru/post/143574/#comment_4813069

[@takkmoil]

Я согласен с автором. Я сам — наркоман

Дальше не читал.

[@kuchumovn]

Можно подумать вы ни разу в жизни ЛСД не жрали

[@takkmoil]

А что, палюсь?

[@vajadhava]

> Я согласен с автором. Я сам — наркоман, и порою сижу за монитором как зачарованный, со стеклянными глазами, кручу-кручу-кручу волшебное колёсико, не в состоянии пойти по делам/на работу/в магазин/поесть/попить/в туалет, и кручу я его с одной единственной мыслью: «Ну когдааа же вы все уже закончитесь?!» (что поделаешь — я привык доводить дела до конца

Специально для вас гугл ограничил выборку поисковика всего 100 страницами.

[@kuchumovn]

Я его за это ненавидел, когда искал уязвимости на сайтах вида «inurl:php?id=».

[@walkman7]

Чтобы посмотреть демо, скачайте архив, и запустите файл «test/test.html» отправте СМС с кодом…

[@walkman7]

там (скачайте архив, и запустите файл «test/test.html») должен быть тег <s>
З.Ы. почему мне показывают теги для сообщений, но использовать их я не могу?

[@vajadhava]

маленькая <s>писька</s> карма :)

[@kuchumovn]

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

[@walkman7]

Я удивлен тому что вам слишком лениво нажать кнопку на гитхабе и бесплатно! получить CDN для хостинга таких страничек для демонтрации работы.

И мне просто дико видеть код на кирилице (

спасибо, у меня все

[@kuchumovn]

Как насчёт того, что я не знаю, что это за кнопка?

[@pro169]

==================
function поставить_адрес_этой_страницы()
{
поставить_адрес_страницы(страница)
}

function поставить_адрес_страницы(страница)
{
set_url(адрес_страницы(страница))
на_странице(страница)
}
==================

Вот Зэ Фак?!!!

[@takkmoil]

1С для Web, не видели?

[@kuchumovn]

ЯрусскиЙ

[@pro169]

даже если это так… но как можно

в 10 строчках кода используются функции:

поставить_адрес_этой_страницы() {}
поставить_адрес_страницы() {}
адрес_страницы() {}
на_странице() {}

и переменная — страница

… дальше мозг завис )

[@kuchumovn]

Ну мы же не в Музее Идеально Чистого Кода

[@monolithed]

Звучит как оправдание, но т.к. вы написали:

Я сам — наркоман

В это больше верится верится.

Почему описание плагина и комментарии у вас на английском, а имена переменных на кириллице?

[@vajadhava]

Процедура ОбработкаВнешнегоСобытия(Кто, Что, Зачем)
  Если Кто=«LRC_Modem» Тогда
    Если Что=«LRC_Modem» Тогда
      Сообщить(Зачем);
    КонецЕсли;
  КонецЕсли;
КонецПроцедуры //ОбработкаВнешнегоСобытия

[@vajadhava]

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

[@HDg]

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

[@vladoos]

Самая большая проблема в бесконечном скролле, это наличие скролла. Он совершенно лишний и только путает. Тут нужен скролл на подобии скролла на сенсорных экранах, когда скроллить нужно сам контент, а не узкую полоску, которая постоянно убегает от тебя и меняет свое положение на экране. Оценивать объем материала в бесконечном скролле не нужно, ведь оно известно — оно бесконечно. Хотя на гугле очень удобно скроллить клавишами j/k по постам, или PageUP/PageDown если нужно «просканировать» контент. Проблема бесконечного скролла удобно решается клавиатурой. Не всем подойдет, но мне это удобно. Не говоря уже о том, что управление с клавиатуры намного быстрее и удобнее, когда к ним привыкаешь.

[@fatal]

Без JS не работает.