Два способа, как сделать вертикальный и горизонтальный скролл div’а через jQuery и не только. Div с прокруткой

Мы будем называть scroll-эффектами любые сценарии и приемы, реализуемые на веб-странице, так или иначе связанные с направлением и/или позицией прокрутки этой страницы относительно окна браузера.

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

1. Parallax (Параллакс).

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

Для справки, вот определение из википедии: “Паралла́кс (греч. παραλλάξ, от παραλλαγή, «смена, чередование») - изменение видимого положения объекта относительно удалённого фона, в зависимости от положения наблюдателя.”

3. Sticky (Прилипание)

Суть техники заключается в том, что элемент при скролле ведет себя как position: relative относительно своего родителя, пока его верхняя граница не достигнет верхнего края окна (viewport-a). При дальнейшем скролле вниз элемент ведет себя как position: static , будто отвязывается от родителя и “прилипает” к границе окна. Вот, к примеру, демо , в котором верхняя панель навигации реализована c эффектом “sticky”.

Этой техникой также можно пользоваться для “прилепливания” элементов к нижней, левой или правой границе экрана, в зависимости от позиции и направления скролла.

Надо сказать, что СSS свойство position: sticky (позволяет с легкостью реализовывать подобные эффекты без применения javascript) описано в черновике спецификации CSS Positioned Layout Module Level . Но вот с поддержкой браузерами пока совсем туго .

4. Reversed sticky (Реверсное прилипание).

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

5. Progress bar (Индикатор прокрутки).

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

6. Accordion (Аккордеон).

Этот сценарий подразумевает последовательное применение stcicky -эффекта к заголовкам разделов страницы при скролле. А вот и демо

7. Menu Spy (Сопровождающее меню).

Этот сценарий хорошо известен под именем scroll spy в twitter bootstrap. Он подразумевает подсветку пунктов меню навигации, в зависимости от положения скролла, например, как в этом демо .

8. Staging (Сцена).

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

Общие проблемы при реализации любых сценариев со скролл-эффектами.

Во-первых , при написании скролл-эффектов нужно учитывать большое количество факторов и величин:

Размер всего документа.
Размеры и позиции элементов, участвующих в сценарии, а также в некоторых случаях и их контейнеров.
Размер и текущее положение видимой части документа (viewport) при скролле.
Направление скролла.
Адаптация при изменении размеров окна с отзывчивым (responsive) дизайном

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

В-третьих , на мобильных девайсах все работает плохо и с тормозами. Javascript изначально работает медленнее. В добавок к этому, мобильные браузеры блокируют выполнение javascript во время скролла.

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

Что такое Scroolly?

Scroolly – это jquery-плагин, который предоставляет Вам простой синтаксис для создания и конфигурирования скролл-эффектов. Он прост в освоении, довольно легковесный и позволяет создавать сколь угодно сложные сценарии. Нужно сказать, что все демо, которые были приведены выше, реализованы с помощью Scroolly!

Правила, их границы и области действия.

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

Чтобы было проще понять о чем идет речь, приведу абстрактный пример:

Нужно плавно показать и плавно скрыть некоторый элемент, когда при скролле он будет входить в область видимости и выходить из нее. Элемент должен начать появляться после того, как его верхняя кромка будет на 100px выше нижней границы видимой области окна и полностью появится, когда его нижняя кромка будет на 100px выше нижней границы видимой области окна. Та же логика с исчезновением, только в симметрично обратном порядке.

Элемент нужно повернуть на 180° во время скролла, пока он будет находится в зоне ±30% от центра видимой зоны.

Чертовски сложно воспринимается на слух, не правда ли? Лучше посмотрим на .

Давайте договоримся, что мы будем называть видимую область документа словом “viewport”. К сожалению, я не могу найти короткий русский аналог этого слова:)

В итоге, здесь мы можем выделить 3 области действия правил c 6-ю границами. Давайте опишем их:

совпадает с нижней границей viewport (элемент начинает появляться)

совпадает с нижней границей viewport (элемент заканчивает появляться)

Точка, находящаяся на 30% ниже центра viewport, совпадает с центром элемента (элемент начинает поворот)

Точка, находящаяся на 30% выше центра viewport, совпадает с центром элемента (элемент заканчивает поворот)

Точка, находящаяся на 100px ниже верхней границы элемента, совпадает с верхней границей viewport (элемент начинает исчезать)

Точка, находящаяся на 100px выше верхней границы элемента, совпадает с верхней границей viewport (элемент заканчивает исчезать)

А теперь подумайте, с чего Вы начали бы описывать всю эту логику? Даже в таком простом сценарии с одним элементом в вычислениях участвуют размер документа, размер viewport, положение viewport, размер элемента, положение элемента, положение скролла… черт возьми, как же не запутаться?

Scroolly спешит на помощь.

Вся прелесть scroolly заключается в том, что каждая из этих границ областей действия правил задается с помощью вот такого наглядного синтаксиса:

el-top = vp-bottom - 100px (элемент начинает появляться)

el-bottom = vp-bottom - 100px (элемент заканчивает появляться)

el-center = vp-center + 30vp (элемент начинает поворот)

el-center = vp-center - 30vp (элемент заканчивает поворот)

el-top = vp-top + 100px (элемент начинает исчезать)

el-bottom = vp-top + 100px (элемент заканчивает исчезать)

А весь сценарий описывается так:

$(".my-element").scroolly([ { from: "el-top = vp-bottom - 100px", to: "el-bottom = vp-bottom - 100px", cssFrom:{opacity:".0"}, cssTo:{opacity:"1"} }, { from: "el-center = vp-center + 30vp", to: "el-center = vp-center - 30vp", cssFrom:{"transform": "rotate(0deg)"}, cssTo:{"transform": "rotate(180deg)"} }, { from: "el-top = vp-top + 100px", to: "el-bottom = vp-top + 100px", cssFrom:{opacity:"1"}, cssTo:{opacity:".0"} } ]);

Где vp – viewport, а el – элемент. Также можно пользоваться абстракциями doc для документа и con для контейнера элемента. А теперь об этом подробнее и с картинками…

У каждого из них есть опорные точки, которые можно использовать в синтаксисе scroolly:

viewport: vp-top , vp-center , vp-bottom
элемент: el-top , el-center , el-bottom
контейнер: con-top , con-center , con-bottom
документ: doc-top , doc-center , doc-bottom

Вот несколько примеров описания областей действия правил c помощью синтаксиса scrolly:

Документация

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

Для ленивых и нетерпеливых – github.com/chayka/jQuery.Scroolly/wiki/Short-Story

Для неторопливых и вдумчивых – github.com/chayka/jQuery.Scroolly/wiki/Long-Story

Ну и самое главное: обязательно посмотрите видео с нашей конференции

Привет, друзья. Сегодня поговорим о плавной прокрутке сайта. То есть не о , при нажатии на кнопку или ссылку, а о плавной прокрутке при использовании колесика или ползунка.

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

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

Плагин для плавной прокрутки сайта

Для решения поставленной задачи я выбрал плагин Malihu-custom-scrollbar-plugin , так как у него очень много возможностей:

Вертикальная и / или горизонтальная полоса прокрутки.
Настраиваемый импульс прокрутки.
Плавная прокрутка колесиком мыши.
Плавная прокрутка за ползунок.
Поддержка клавиатуры и плавная прокрутка стрелочками или PgUp/PgDn.
Поддержка сенсорных экранов.
Готовые к использованию темы.
Ручная настройка с помощью CSS.
Разные варианты отображения ползунка.
Возможность добавить плавный скролл различным элементам на странице, у которых он присутствует.

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

«Стоп, плавный scroll в различных блоках это хорошо, но где же сама плавная прокрутка сайта из-за который мы пришли?» — скажете вы. Спокойствие. Сейчас мы этим займемся.

Подключения плагина

Так как выбранное решение — это jQuery плагин, то первым делом и подключим к сайту сам jQuery, если он у вас не подключен.

Теперь скачайте плагин для плавной прокрутки, по ссылке выше, и подключите к сайту 2 файла.

jquery.mCustomScrollbar.concat.min.js
jquery.mCustomScrollbar.min.css

Получится такая структура:

Плавный скролл сайта

Главное помните, что все зависящие от jQuery плагины должны подключаться после самого jQuery.

После того как все подключили, нужно инициализировать скрипт:

(function ($) { $(window).on("load", function () { $("body").mCustomScrollbar({ theme: "dark-thin" }); }); })(jQuery);

И добавить в CSS несколько простых правил, чтобы прокрутка применилась к документу. В самом начале вашего файла стилей добавьте следующую разметку:

Body, html { height: 100%; overflow: hidden; }

Это позволит убрать стандартную полосу прокрутки браузера и задать высоту, понятную скрипту. Не бойтесь, если подключаете к уже готовому сайту. В 99% случаев это никак не повлияет на вашу разметку.

Подключается точно так же как и первый, имеет всего 3 настройки и весит всего 2.6 килобайт:

$(function() { jQuery.scrollSpeed(100, 800, "easeOutCubic"); })

Где первое число — это шаг прокрутки, второе число — это скорость, а третье — тип анимации.

На этом — все. Всем — пока.

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

Понадобится

Слой с фиксированным размером и CSS-стиль.

CSS

В CSS-классе.scroll устанавливаются параметры 600px в длину и 300px в высоту, внутренний отступ, рамка и цвет фона. НО! Самое главное параметр overflow:auto устанавливает появление полосы прокрутки при количестве текста большим, чем размер слоя.

Scroll { width:500px; height:300px; /* необходим фиксированный размер */ overflow:auto; /* прокрутка появляется по необходимости */ padding:10px 20px; border:#999 1px solid; background-color:#FAFAFA; }

HTML

Наибольшее распространение получили этиленгликолевые охлаждающие жидкости на основе этиленгликоля и воды (дистиллированной) с комплексом присадок. Антифризы получаются как водные растворы соответствующих концентратов. В процессе эксплуатации качество антифриза можно контролировать по плотности. Из охлаждающей жидкости в процессе эксплуатации в первую очередь испаряется вода, которую следует периодически доливать (дистиллированную). Необходимо следить за тем, чтобы в антифризы не попадали бензин и масла, так как они вызывают вспенивание и выброс жидкости из системы. Срок службы охлаждающих жидкостей типа «Тосол» и «Лена» ограничивается долговечностью присадок и обычно составляет 2 года; по пробегу для различных автомобилей в среднем составляет 50000 км. При первом техобслуживании подержанного автомобиля следует заменить охлаждающую жидкость. После слива старой жидкости заправьте систему чистой водой, пустите двигатель и дайте ему поработать на холостых оборотах 15-20 минут; затем слейте воду и заправьте систему новой охлаждающей жидкостью.

Результат

На экране вы увидите небольшую рамку с текстом и с границей серого цвета.

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

Антифризы получаются как водные растворы соответствующих концентратов. В процессе эксплуатации качество антифриза можно контролировать по плотности. Из охлаждающей жидкости в процессе эксплуатации в первую очередь испаряется вода, которую следует периодически доливать (дистиллированную). Необходимо следить за тем, чтобы в антифризы не попадали бензин и масла, так как они вызывают вспенивание и выброс жидкости из системы.

Срок службы охлаждающих жидкостей типа «Тосол» и «Лена» ограничивается долговечностью присадок и обычно составляет 2 года; по пробегу для различных автомобилей в среднем составляет 50000 км.

При первом техобслуживании подержанного автомобиля следует заменить охлаждающую жидкость. После слива старой жидкости заправьте систему чистой водой, пустите двигатель и дайте ему поработать на холостых оборотах 15-20 минут; затем слейте воду и заправьте систему новой охлаждающей жидкостью.

В этой статье мы детально разберем свойство overflow со всеми его значениями, позволяющее так же добавить или убрать горизонтальную/вертикальную полосу прокрутки. Другими словами как сделать полосы прокрутки.

Overflow в CSS отвечает за то, как будет выглядеть отображение информации в блоке, в случае превышения содержимого высоты или ширины этого блока. Это свойство применимо только к блочным элементам (display : block ; или те которые изначально являются блочными - div и так далее).

Возможные значения, которые принимает это свойство(по-умолчанию visible ):

Visible - Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
Hidden - Отображается только область внутри элемента, остальное будет скрыто.
Scroll - Всегда добавляются полосы прокрутки.
Auto - Полосы прокрутки добавляются только при необходимости.
Inherit - Наследует значение родителя.

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

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

Код HTML

Страница visible hidden

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

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

scroll

auto

body {margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;} h2 {color:#CC0033;} div { width:200px; /* фиксированная ширина */ height:300px; /* фиксированная высота */ border:1px solid #555; padding:4px; margin:4px; float:left; } .VisibleDiv {overflow:visible;} .HiddenDiv {overflow:hidden;} .ScrollDiv {overflow:scroll;} .AutoDiv {overflow:auto;}

Стоит обратить внимание на то, что в данном конкретном случае блоки с заданой фиксированной высотой и шириной. Это важно, например, рассмотрим вариант, когда высота блока задана в auto :

Мы видимо, что текст во всех случаях корректно отображается внутри блока, кроме небольшого неудобства в случае со scroll , где появляются неактивные полосы прокрутки.

Но в этом случае заключается небольшая опасность, встретившись с которой многие не понимают, почему она возникла и как ее исправить. Дело в том, что если блок с overflow : visible ; то есть значением по-умолчанию, а его содержимое имеет элементы с любым значением float , кроме none , то отображаться все это будет некорректно. Для того, чтобы понять, что это за ситуация, рассмотрим пример:

Страница Под блоком VisibleDiv идет другой блок visible

Идет сразу после дива с overflow:visible (значением по-умолчанию) Под блоком VisibleDiv ничего нету visible

body {margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;} h2 {color:#CC0033;} p {float:left;} div { width:500px; height:auto; border:1px solid #555; padding:4px; margin:4px; } .VisibleDiv {overflow:visible;background: rgba(0,255,0,0.1);} .ignor {background: rgba(0,255,0,0.6); color:#FFFFFF; font-weight:bold;}

В первом случае, видно, что содержимое с свойством float выезжает за пределы блока и не учитываются им при определении высоты блока, во втором случае под блоком с overflow : visible ; специально размещен другой блок и закращен в другой цвет. Это не единственные примеры того, как может себя вести на странице такие блоки (с overflow : visible ; и height : auto ; ). Исправляется это заменой значения visible на hidden , следует помнить, что это свойство стоит указывать только блокам с height : auto ; , если будет фиксированная высота, то велик шанс, что содержимое просто скроется, если оно больше заданной высоты.

Вот как будет выглядеть исправленный вариант:

Так же у вас не возникнет такой проблемы, если блоку с overflow : visible ; и height : auto ; задано еще и какое-нибудь значение свойства float . Вообще во многих случаях отображение элементов зависит от набора свойств, а не от отдельных свойств.

Два способа, как сделать вертикальный и горизонтальный скролл div’а через jQuery и не только. Div с прокруткой

Еще на эту тему:

Другие статьи: