Ускоренный скролл длинных колонок на jQuery

Наверняка многие из Вас сталкивались с ситуацией, когда необходимо разместить контент в виде нескольких колонок с определенным содержимым в каждой из них, но при прокрутке вниз, в конец контента, края казались рваными из-за разной длины каждой колонки?

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

Ускоренный скролл длинных колонок на jQuery. Верх страницы

Ускоренный скролл длинных колонок на jQuery. Верх страницы

Как видно, вверху всё ровно и красиво, в то время как, если мы прокрутим содержимое вниз, в самый конец, то заметим, что столбцы имеют разную длину, как показано на рисунке ниже, т.к. каждая из колонок содержит разное количество элементов. А что если первый столбец будет иметь в 5 раз больше элементов? Тогда будет очень не красиво.

Ускоренный скролл длинных колонок на jQuery. Низ страницы

Ускоренный скролл длинных колонок на jQuery. Низ страницы

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

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

Как это работает?

Для начала необходимо определиться с количеством колонок (у меня их будет 4) и подготовить структуру страницы:

Структура у нас не сложная, есть один общий блок с классом .cols, который объединяет в себе все наши колонки, и соответственно 4 блока (колонки), в каждой из которых находятся свои элементы с классом .item, в которых может быть размещено что-либо, не обязательно картинки.

Оформление

Добавим некоторое оформление, чтобы внешне было видно что к чему.

Обратите внимание, что для второй колонки #col2 мы задали position: relative — сделано это для того, чтобы не определять высоту для общего блока. Это свойство важно указать для столбца с наименьшей длиной. В то время как для остальных колонок указываем position: absolute, т.к. мы будем двигать блоки относительно общего блока. И еще один важный момент, общему блоку .cols не обязательно указывать высоту, она будет принимать значение высоту наименьшей колонки, для которой как раз и задали свойство position: relative. Важно также заметить, что мы нигде не используем свойство float, если по каким-либо причинам Вам необходимо его использовать, тогда придется указать конкретное значение высоты для общего блока .cols. Помимо этого мы добавили overflow: hidden — это необходимо для того, чтобы скрыть все элементы, которые не умещаются в блоке. На рисунке ниже, можно увидеть как в итоге будет выглядеть нижняя часть страницы.

Ускоренный скролл длинных колонок на jQuery. Измененный низ страницы

Ускоренный скролл длинных колонок на jQuery. Измененный низ страницы

Всё ровно и красиво, как и вверху, но, в результате добавленного оформления теперь не видно элементы, которые не уместились.

Функция скроллинга

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

Сперва подключите библиотеку jQuery удобным для Вас образом, после чего добавьте следующий скрипт:

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

Что же в итоге получилось, Вы можете узнать из примера или скачав вложение в конце статьи.

Полезность статьи

Оцените, на сколько полезной оказалась статья.
1 балл2 балла3 балла4 балла5 баллов
5,00 / 5 баллов
1 участников
Комментарии

Здесь еще никто не оставлял комментарии.

Добавить комментарий

* - поля обязательные для заполнения. E-mail не публикуется.