Студебеккеры на дорогах послевоенного ссср (34 фото)

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

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

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

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

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

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

Запрет прокрутки

Иногда бывает нужно временно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.

Чтобы запретить прокрутку страницы, достаточно поставить .

При этом страница замрёт в текущем положении.

Попробуйте сами:

При нажатии на верхнюю кнопку страница замрёт на текущем положении прокрутки. После нажатия на нижнюю – прокрутка возобновится.

Вместо может быть любой элемент, прокрутку которого необходимо запретить.

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

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

Ширина/высота страницы с учётом прокрутки

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

Это верно для обычных элементов.

А вот для страницы с этими свойствами возникает проблема, когда прокрутка то есть, то нет. В этом случае они работают некорректно. В браузерах Chrome/Safari и Opera при отсутствии прокрутки значение в этом случае может быть даже меньше, чем , что, конечно же, выглядит как совершеннейшая чепуха и нонсенс.

Эта проблема возникает именно для , то есть для всей страницы.

Надёжно определить размер страницы с учётом прокрутки можно, взяв максимум из нескольких свойств:

Почему так? Лучше и не спрашивайте, это одно из редких мест, где просто ошибки в браузерах. Глубокой логики здесь нет.

Теги HTML

lass=»block_content scroll»>

  • Все теги
  • Валидация тегов
    • accesskey
    • charset
    • coords
    • download
    • href
    • hreflang
    • name
    • rel
    • rev
    • shape
    • tabindex
    • target
    • title
    • type
  • title

    • align
    • alt
    • archive
    • code
    • codebase
    • height
    • hspace
    • vspace
    • width
    • accesskey
    • alt
    • coords
    • href
    • hreflang
    • nohref
    • shape
    • tabindex
    • target
    • type
    • autoplay
    • controls
    • loop
    • muted
    • preload
    • src
    • href
    • target
    • color
    • face
    • size
  • dir

    • balance
    • loop
    • src
    • volume
    • alink
    • background
    • bgcolor
    • bgproperties
    • bottommargin
    • leftmargin
    • link
    • rightmargin
    • scroll
    • text
    • topmargin
    • vlink
  • clear

    • accesskey
    • autofocus
    • disabled
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • name
    • type
    • value
    • align
    • valign
    • align
    • char
    • charoff
    • span
    • valign
    • width
    • align
    • char
    • charoff
    • span
    • valign
    • width
    • cite
    • datetime
    • align
    • title
    • align
    • height
    • hidden
    • hspace
    • pluginspage
    • src
    • type
    • vspace
    • width
    • disabled
    • form
    • title
    • color
    • face
    • size
    • accept-charset
    • action
    • autocomplete
    • enctype
    • method
    • name
    • novalidate
    • target
    • bordercolor
    • frameborder
    • name
    • noresize
    • scrolling
    • src
    • border
    • bordercolor
    • cols
    • frameborder
    • framespacing
    • rows
  • align

  • align

  • align

  • align

  • align

  • align

  • profile

    • align
    • color
    • noshade
    • size
    • width
    • manifest
    • title
    • xmlns
    • align
    • allowtransparency
    • frameborder
    • height
    • hspace
    • marginheight
    • marginwidth
    • name
    • sandbox
    • scrolling
    • seamless
    • src
    • srcdoc
    • vspace
    • width
    • align
    • alt
    • border
    • height
    • hspace
    • ismap
    • longdesc
    • lowsrc
    • src
    • usemap
    • vspace
    • width
    • accept
    • accesskey
    • align
    • alt
    • autocomplete
    • autofocus
    • border
    • checked
    • disabled
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • list
    • max
    • maxlength
    • min
    • multiple
    • name
    • pattern
    • placeholder
    • readonly
    • required
    • size
    • src
    • step
    • tabindex
    • type
    • value
    • cite
    • datetime
    • accesskey
    • for
    • accesskey
    • align
    • title
    • type
    • value
    • charset
    • href
    • media
    • rel
    • sizes
    • type
  • name

    • behavior
    • bgcolor
    • direction
    • height
    • hspace
    • loop
    • scrollamount
    • scrolldelay
    • truespeed
    • vspace
    • width
    • label
    • type
    • charset
    • content
    • http-equiv
    • name
    • high
    • low
    • max
    • min
    • optimum
    • value
    • align
    • archive
    • classid
    • code
    • codebase
    • codetype
    • data
    • height
    • hspace
    • tabindex
    • type
    • vspace
    • width
    • reversed
    • start
    • type
    • disabled
    • label
    • disabled
    • label
    • selected
    • value
  • align

    • name
    • type
    • value
    • valuetype

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

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

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

  1. (элемент начинает появляться)
  2. (элемент заканчивает появляться)
  3. (элемент начинает поворот)
  4. (элемент заканчивает поворот)
  5. (элемент начинает исчезать)
  6. (элемент заканчивает исчезать)

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

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

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

viewport: , ,
элемент: , ,
контейнер: , ,
документ: , ,

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

Изменение прокрутки: scrollTo, scrollBy, scrollIntoView

Важно:

Чтобы прокрутить страницу при помощи JavaScript, её DOM должен быть полностью загружен.

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

Никто не мешает точно так же поступать и со страницей. Во всех браузерах, кроме Chrome/Safari/Opera можно осуществить прокрутку установкой , а в указанных – использовать для этого . И будет работать. Можно попробовать прокручивать и так и эдак и проверять, подействовала ли прокрутка, будет кросс-браузерно.

Но есть и другое, простое и универсальное решение – специальные методы прокрутки страницы window.scrollBy(x,y) и window.scrollTo(pageX,pageY).

  • Метод прокручивает страницу относительно текущих координат.

    Например, кнопка ниже прокрутит страницу на вниз:

    window.scrollBy(0,10)

  • Метод прокручивает страницу к указанным координатам относительно документа.

    Он эквивалентен установке свойств .

    Чтобы прокрутить в начало документа, достаточно указать координаты .

    window.scrollTo(0,0)

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

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

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

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

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

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

  1. Точка, находящаяся на 100px ниже верхней границы элемента, совпадает с нижней границей viewport (элемент начинает появляться)
  2. Точка, находящаяся на 100px выше верхней границы элемента, совпадает с нижней границей viewport (элемент заканчивает появляться)
  3. Точка, находящаяся на 30% ниже центра viewport, совпадает с центром элемента (элемент начинает поворот)
  4. Точка, находящаяся на 30% выше центра viewport, совпадает с центром элемента (элемент заканчивает поворот)
  5. Точка, находящаяся на 100px ниже верхней границы элемента, совпадает с верхней границей viewport (элемент начинает исчезать)
  6. Точка, находящаяся на 100px выше верхней границы элемента, совпадает с верхней границей viewport (элемент заканчивает исчезать)

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

Ссылка на основную публикацию