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

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

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

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

    Однажды утром я встал и твёрдо решил: «Хватит это терпеть!».

    Представляю вам свой небольшой скрипт, который я на днях написал для своей «социальной сети» (с блекджеком и шлюхами).

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

    Какие нововведения предлагает этот скрипт:

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

    То, докуда дошла эта полоска сверху — это сколько результатов выборки мы уже пролистали. Вообще, эта полоска как бы чёрная. Там, где она серая — это место во всей выборке, где мы находимся сейчас.

    Обратите также внимание на то, что адрес страницы меняется во время прокрутки. Таким образом, вы можете сегодня вечером пролистать половину, добавить страницу в закладки, выключить компьютер, пойти спать, проснуться утром, включить компьютер, зайти на страницу, добавленную вами вчера перед сном в закладки, и продолжить листать с того самого места, на котором вы остановились. И, более того, вы сможете листать с этого места не только вперёд, но и назад.

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

    Этот скрипт, очевидно, не является чем-то высеченным в граните, и я сам, встав сегодня с утра, переписал его половину. Тем не менее, работоспособность вроде как стабильная, и проверено в последних версиях Chrome и FireFox. Сразу скажу: не гонюсь за «кроссбраузерностью» — её всегда можно будет допилить, если кто-то захочет использовать этот скрипт на своём «кроссбраузерном» сайте.

    Вроде как всё, демо говорит само за себя. Пост провоцирует комментарии.

    Что ещё можно сделать (на основе комментариев):

    При клике в любое место полоски — переходить на соответствующую страницу выборки.

    Убирать страницы данных с верха веб страницы, когда данных на веб странице становится слишком много (чтобы не тормозило).

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

    demo.lanmediaservice.com/video/#/catalog/page/4
    search.rsl.ru
    Share post

    Comments 77

      +13
      Все же, основной минус бесконечного скрола — это не столько отсутствие возможности оценить кол-во информации, сколько невозможность в один клик попасть в середину — конец списка. Щелкнуть на страницу №20 всегда проще чем крутить вниз скролл.
        –2
        Попасть на любую страницу можно и здесь: просто подставьте в URL номер нужной вам страницы.
        Поскольку человекопонятные URL'ы сейчас являются стандартом, это должно быть годным решением.
          +5
          Для меня возможно, для вас наверно тоже, для большинства — нет
            –8
            Считаю, что пользователю не нужно переходить на номер страницы, если он не гик.
            Будет сделан переход по клику.
              +5
              Чот не могу понять, как вы пришли к такому выводу?
                +7
                Хз, уже не помню.
                  0
                  А в чем действительно необходимость переходить на некую конкретную страницу, например 21-ю? Ведь фактически вы не имеете представления о ее содержимом, значит вам в любом случае нужно дойти до нее последовательно. Если же у вас есть некое предположение, что есть некая сортировка, а на 21 странице находится запись, которая как раз должна удовлетворить вашим ожиданиям (по цене, дате, рейтингу, релевантности), то вероятно есть необходимость в иных вариантах категоризации информации.
                    +1
                    20 прочитал, пошел спать, комп выключил. Заново все это листать и вспоминать на чем остановился?
                    Ну или если инет ужасно тупит. Сидишь крутишь-крутишь, а потом просто все перестало работать т.к. инета нет. Рефрешишь страницу — и опять крутишь до посинения. Не спорю, что это уже могут быть и детали реализации. Но с обычным пейджингом как-то проще и удобнее.
                      0
                      Вы часто смотрите в Гугле 20 страницу при поиске?

                      С одной стороны я с вами согласен, забыл — нужно запомнить страницу. Но проблема в том, что информация, как правило, в нормальных источниках периодически меняется. Запомните 20 страницу Хабра и утром вы не найдете старых топиков. А если информация действительно идет последовательно — некий архив статей, который читается подряд, то это должна быть либо книга для последовательного чтения, либо набор разделов для нахождения нужных статей.
                        0
                        Правильно говорите :) Надо использовать это там, где нужно, а не лепить куда попало.
                        Я только хотела описать варианты, где такая фича неудобна.
                        0
                        я же решил (и многие уже решили) описанную вами ситуацию путём подстановки номера страницы в url при прокрутке.
                        смотрите пример или ссылки.
                0
                В Вашей реализации пользователь должен угадывать по величине скролла сколько всего страниц
                  –3
                  Считаю, что пользователю не нужно переходить на номер страницы, если он не гик.
                  Будет сделан переход по клику.
                +3
                Я на другой минус наткнулся на каком-то сайте с фотографиями. Листаю себе, листаю. Замечаю, что начинает притормаживать. Запускаю taskmgr и вижу, что один из процессов хрома скушал всю доступную для 32-битного процесса память…
                  0
                  Да да, и это тоже я решал.
                  На своём сайте пробовал удалять сверху самые ранние результаты, если их выведено слишком много.
                  А здесь — можно просто перезагрузить страницу, если начнёт тормозить. Итог — продолжите листать оттуда же, где остановились, но старый процесс (в случае хрома) убьётся, и новый, девственно чистый, создастся.
                    +1
                    помоему большинство скажет что у вас тормозной сайт нежели будет перезагружать страницу каждый раз, или вы крупными буквами на сайте напишите. «Обнови страницу если тормозит»
                      0
                      Согласен.
                      Значит ещё один пункт в туду-лист: убирать страницы данных с верха веб страницы, когда данных на веб странице становится слишком много.
                        0
                        Для того, чтобы вернуться наверх опять подгружать? Не лучший вариант
                          +1
                          Нормальный вариант.
                            0
                            Одни скрыть, другие показать — тормозов еще больше, нет?
                              0
                              Предложите что-нибудь лучшее
                                0
                                забить на этот скролл, делать разбиение на страницы, лучше этого пока никто не придумал. Мы тоже реализовали такую фишку в одном из магазинов и все было, потом когда оказалось что товаров тысячи — скролл стал адом, как не оптимизируй толку от него было гараздо меньше, чем неприятностей. Пользовтелю такая фишка вообще не нужна, он привык к пагинации и к тому что все работает.
                                  +6
                                  Если проблема заключается в том что разрастается DOM (предположительно). можно попробовать для уменьшения страницы инкапсулировать данные уже запрошенные с сервера в объект, или массив JS, по мере загрузки нового контента удалять старые данные из DOM, но оставлять данные в массиве. что позволит нам быстро обращаться к предыдущим данным, в случае необходимости, и вставлять их в DOM, но при этом мы избежим разрастания страницы.

                                  п.с.: так-то я дизайнер, это имхо
                                    +2
                                    Это хорошее решение, в одно время сталкивался с написанием грида, где требовалось отображать невероятное количество данных. Удалять и вставлять в DOM по прокрутке скроллом, оказалось отличной идеей.
                    0
                    А еще очень здорово делать браузерный поиск по странице.
                      0
                      Поясните, пожалуйста
                        +3
                        Недавно искал комментарий одного человека на фейсбуке. Открыл его ленту, нажал Ctrl F, вбил слово из комментария (которое помнил), и ничего не нашёл — подгружен только один экран текста.

                        Пришлось сначала мотать вниз, чтобы подгрузились записи за месяц, и лишь потом искать
                      0
                      Спорить с этим трудно. Но с другой стороны мне очень не часто приходится открывать страницу №20, потому что данные, которые нужно разбить по страницам, как правило, уже отсортированы. Гораздо быстрее поменять условия сортировки чем искать что-то так далеко.
                        0
                        ещё одна из проблем, которую (в некоторых случаях) решает бесконечный скроллинг — на стороне сервера нет необходимости знать, сколько всего данных доступно пользователю, достаточно инициализировать поток и выбрать из него «с N по M», прекратив обработку после. в случае ФБ это, мне кажется, может быть актуально.
                          0
                          В вконтакте есть такая возможность, только не на всех страницах. Во время скрола в правом верхнем углу появляется пагер со страничками, можно ткнуть на любую он подгружает инфу и смещает окно.
                            0
                            вы примеры посмотрите, особенно первый там явно показан размер всего материала, все прекрасно понятно!
                            +2
                            А можно сделать на полосе справа метки — тыркнул на «стр. 20», и перешёл на неё?
                              0
                              Хорошая идея.
                              Добавляю в ТуДу-лист.
                              +2
                              Описание на английском. А в коде переменные на русском. Зачем?
                                0
                                Начал писать на русском, чисто для фана, но потом подумал, что этот скрипт может заинтересовать кого-то ещё. А поскольку мы живёт в многонациональном мире, то в будущем код будет переведён на английский. Сейчас просто неохота.
                                  +1
                                  Я думаю на русском даже комментировать не стоит, писать сам код — что-то новое ) особенно если потом окажется не utf8
                                    0
                                    Словил такой глюк: называл файлы по-русски, на винде, и залил на гитхаб.
                                    Оказалось: не дружат русские имена файлов с виндой и гитом.
                                    На Макоси работает нормально.
                                +2
                                Изменяемый url — все правильно.
                                Дополнительный скролл в данном виде — нет, он конкурирует с обычным скроллом браузера. +нарушена иерархия. Нравится как это реализовано на www.wdyl.com/#habrahabr. По ссылке скроллинг не бесконечный, но идея правильная.

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

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

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

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

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

                                  Именно вконтакт меня и бесит, когда листаю поиск людей или посты на избранных страницах.
                                    +1
                                    Я про бесконечную прокрутку в обсуждениях (смотркть в правый верхний угол). Сорри, что не уточнил сразу
                                      0
                                      Гляну при случае. Что-то раньше не замечал.
                                    0
                                    Мне, кстати, на vk.com ужасно нравится левая панелька «Наверх». Очень удобное решение для бесконечного скроллинга.
                                      0
                                      Очень полезная вещь не только для бесконечной прокрутки.
                                        +4
                                        Я пользуюсь клавишей «Home»
                                          +1
                                          90% пользователей даже не догадываются про CTRL+F © Dan Russell
                                          Уверен, ситуация с Home среди «обычных» пользователей не лучше
                                            0
                                            Прикольно, не знал.
                                              0
                                              про ctrl-F — убедился по жене, чего уж говорить о «90% пользователей»
                                          +1
                                          Очень жаль что они убрали функцию это панельки «Вниз»
                                            0
                                            +1. постоянно помню, чтобы применить, но пока не было случая.

                                            У них она теперь еще функцию «Назад» иногда выполяет. Еще хороша идея полос слева, в контенте и справа при просмотре фото.
                                              0
                                              ненавижу ее
                                            +5
                                            Грамотно сделано здесь — http://demo.lanmediaservice.com/video/#/catalog/page/4, при прокрутке меняется адресная строка и появляется подсказка на какой странице сейчас находишься

                                            Также ВКонакте в теме обсуждения(например, группа «Кубик в кубе»), есть информер с количеством страниц, и при прокрутке показывает на какой странице ты сейчас находишься. Только здесь не меняется адресная строка
                                              0
                                              Ну не знаю по вашему примеру я не особо замечаю страницы ( а пролистав штук 10 и нажав назад меня начинает раздражать что назад — отлистывает страницы, мне хочется на предыдущую, а не вверх по списку. Да ребята поработали и внедрили интересные решения для насущных проблем, но мне привчней стандартное решение
                                                0
                                                Хорошо сделали.
                                                Добавил ссылку с статью.
                                                0
                                                Первый пример — хорошо, но лучше такие подсказки делать слева. И писать, естественно «Страница 5». Пользователь не должен думать.
                                                0
                                                Я согласен с автором. Я сам — наркоман

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

                                                  Специально для вас гугл ограничил выборку поисковика всего 100 страницами.
                                                    0
                                                    Я его за это ненавидел, когда искал уязвимости на сайтах вида «inurl:php?id=».
                                                    +1
                                                    Чтобы посмотреть демо, скачайте архив, и запустите файл «test/test.html» отправте СМС с кодом…
                                                      0
                                                      там (скачайте архив, и запустите файл «test/test.html») должен быть тег <s>
                                                      З.Ы. почему мне показывают теги для сообщений, но использовать их я не могу?
                                                        –1
                                                        маленькая <s>писька</s> карма :)
                                                        0
                                                        Если вы сами не бились над решением этой вселенской проблемы, то конечно вам будет слишком лениво сделать пару дополнительных кликов мышью, и вряд ли вам вообще пригодится мой код.
                                                          0
                                                          Я удивлен тому что вам слишком лениво нажать кнопку на гитхабе и бесплатно! получить CDN для хостинга таких страничек для демонтрации работы.

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

                                                          спасибо, у меня все
                                                            0
                                                            Как насчёт того, что я не знаю, что это за кнопка?
                                                        +3
                                                        ==================
                                                        function поставить_адрес_этой_страницы()
                                                        {
                                                        поставить_адрес_страницы(страница)
                                                        }

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

                                                        Вот Зэ Фак?!!!
                                                          0
                                                          1С для Web, не видели?
                                                            –1
                                                            ЯрусскиЙ
                                                              +2
                                                              даже если это так… но как можно

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

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

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

                                                              … дальше мозг завис )
                                                                0
                                                                Ну мы же не в Музее Идеально Чистого Кода
                                                                0
                                                                Звучит как оправдание, но т.к. вы написали:

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

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

                                                                Почему описание плагина и комментарии у вас на английском, а имена переменных на кириллице?
                                                                0
                                                                Процедура ОбработкаВнешнегоСобытия(Кто, Что, Зачем)
                                                                  Если Кто=«LRC_Modem» Тогда
                                                                    Если Что=«LRC_Modem» Тогда
                                                                      Сообщить(Зачем);
                                                                    КонецЕсли;
                                                                  КонецЕсли;
                                                                КонецПроцедуры //ОбработкаВнешнегоСобытия
                                                                0
                                                                Вообще, такой скрол как идея мне очень нравится, в нативных апликушках видел. Скрипт тоже неплох, хрен бы на кирилицу, главное что он реально работает. Буду юзать, еси автор на меня бочку не покатит за копирайту там всяческую…
                                                                  +1
                                                                  Больше всего в бесконечном скролле меня бесит то, что хрен нажмешь на ссылки в футере страницы. Новые записи грузятся быстрее чем я успеваю среагировать. Ужасно бесит. Складывается ощущение, что специально издеваются
                                                                    +1
                                                                    Самая большая проблема в бесконечном скролле, это наличие скролла. Он совершенно лишний и только путает. Тут нужен скролл на подобии скролла на сенсорных экранах, когда скроллить нужно сам контент, а не узкую полоску, которая постоянно убегает от тебя и меняет свое положение на экране. Оценивать объем материала в бесконечном скролле не нужно, ведь оно известно — оно бесконечно. Хотя на гугле очень удобно скроллить клавишами j/k по постам, или PageUP/PageDown если нужно «просканировать» контент. Проблема бесконечного скролла удобно решается клавиатурой. Не всем подойдет, но мне это удобно. Не говоря уже о том, что управление с клавиатуры намного быстрее и удобнее, когда к ним привыкаешь.
                                                                      0
                                                                      Без JS не работает.

                                                                      Only users with full accounts can post comments. Log in, please.