Ниндзя, техника прокрутки!

• Автор: Чен Даютоу
• гитхаб:KRISACHAN

предисловие

В ежедневном развитии мыscrollЭто слово определенно не является незнакомым.

Например, использование JS для работы как тигр, потому что вы не привыкли к стилю браузера по умолчанию.пользовательская полоса прокрутки.

Или swoosh~ он сразу достигнет вершинывернуться к вершине.

Или куда вы хотите пойти?навигация по заголовку.

Но в прошлой разработке реализовать эти функции было не так просто.

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

let timer = null;
let backTop = document.querySelector("#backTop");
backTop.addEventListener("click", () => {
  cancelAnimationFrame(timer);
  let startTime = +new Date();
  let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  let totalTime = 300;
  timer = requestAnimationFrame(() => {
    let lastTime = totalTime - Math.max(0, startTime - +new Date() + totalTime);
    document.documentElement.scrollTop = document.body.scrollTop =
      (lastTime * -scrollTop) / totalTime + scrollTop;
    timer = requestAnimationFrame(func);
    if (lastTime === totalTime) {
      cancelAnimationFrame(timer);
    }
  });
});

(Отказ от ответственности: псевдокод не проверен, если есть ошибка, пожалуйста, простите меня.)

Эй, это означает написать анимацию и постоянно изменять расстояние вертикальной прокрутки текущей страницы, пока оно не станет равным 0.

(Толпа, поедающая дыню: «Трудно? Ты слишком хорош, дядя!»)

Но на самом деле со временемweb apiтак же какcssПоскольку спецификация продолжает улучшаться, функции, которые мы когда-то считали громоздкими для реализации, стали проще. Ниже мы можем вместе обсудить эти улучшения.

Семейство прокрутки в веб-API

Приезжаем в Канкансемья прокруткиинтересный API.

прокрутить и прокрутить

scroll()а такжеscrollToМетод используется для прокрутки до определенной координаты в данном элементе.Elementинтерфейс.

Синтаксис следующий:

1. scroll/scrollTo(x, y)

   • x: абсцисса позиции, в которую должен быть перемещен элемент.
   • y: ордината позиции, в которую должен быть перемещен элемент.

2. scroll/scrollTo(options)

   optionsСвойства поддержкиleft,topтак же какbehavior

   • top: абсцисса позиции, в которую должен быть перемещен элемент.
   • left: ордината позиции, в которую должен быть перемещен элемент.
   • behavior: режим движения элемента, если онauto, анимационный эффект отсутствует, еслиsmooth, плавная прокрутка.

Давайте перейдем к каштанам Канкан:

Приведенный выше пример взят из репозитория MDN на GitHub.dom-examples

Основной код JS выглядит следующим образом:

let scrollOptions;

const form = document.querySelector("form");
const leftInput = document.getElementById("left");
const topInput = document.getElementById("top");
const scrollInput = document.getElementById("scroll");

form.addEventListener("submit", e => {
  e.preventDefault();
  scrollOptions = {
    left: leftInput.value,
    top: topInput.value,
    behavior: scrollInput.checked ? "smooth" : "auto"
  };

  window.scrollTo(scrollOptions);
});

scrollBy

scrollBy()Метод заключается в том, чтобы прокрутить элемент на определенное расстояние.Elementинтерфейс.

Синтаксис следующий:

1. scrollBy(x, y)

   • x: абсцисса позиции, в которую должен быть перемещен элемент.
   • y: ордината позиции, в которую должен быть перемещен элемент.

2. scrollBy(options)

   optionsСвойства поддержкиleft,topтак же какbehavior

   • top: абсцисса позиции, в которую должен быть перемещен элемент.
   • lef：: ордината позиции, в которую должен быть перемещен элемент.
   • behavior: режим движения элемента, если онauto, анимационный эффект отсутствует, еслиsmooth, плавная прокрутка.

Еще каштан:

Основной код выглядит следующим образом:

let scrollOptions;

const form = document.querySelector("form");
const leftInput = document.getElementById("left");
const topInput = document.getElementById("top");
const scrollInput = document.getElementById("scroll");

form.addEventListener("submit", e => {
  e.preventDefault();
  scrollOptions = {
    left: leftInput.value,
    top: topInput.value,
    behavior: scrollInput.checked ? "smooth" : "auto"
  };

  window.scrollBy(scrollOptions);
});

Ммммм, да, просто поставьscrollToизменить наscrollByВот и все. очень умно~

Давайте посмотрим на совместимость трех вышеуказанных API:

Мммм, совместимость неплохая.

(дынные массы: у IE нет прав человека???????)

Element.scrollIntoView

Element.scrollIntoView()метод прокрутки текущего элемента в видимую область окна браузера.

Синтаксис следующий:

1. scrollIntoView(alignToTop)

   alignToTopявляется логическим значением, если не заполнено, по умолчанию используетсяtrue. эквивалентно{block: 'start', inline: ‘nearest‘}.

   если значениеtrue, верхняя часть элемента будет выровнена по верхней части видимой области области прокрутки, в которой он находится. еслиfalse, он выравнивается по нижнему краю. эквивалентно{block: 'end', inline: 'nearest'}

2. scrollIntoView(scrollIntoViewOptions)

   scrollIntoViewOptionsОбъект со следующими свойствами:

   • behavior: режим движения элемента, если онauto, анимационный эффект отсутствует, еслиsmooth, плавная прокрутка.
   • block: определяет выравнивание по вертикали, значение может бытьstart,center,endилиnearestодин. По умолчаниюnearest.
   • inline: определяет выравнивание в горизонтальном направлении, значение может бытьstart,center,endилиnearestодин. По умолчаниюnearest.

Давай, позволь мне объяснить тебеblockа такжеinlineЧто происходит с необязательным значением :

• start: Выровняйте по волосам отца текущего элемента (вверху).
• center: Выровняйте по животу (середине) текущего элемента.
• end: Выровнять по jio (нижней части) текущего элемента.
• nearest: Принцип близости, иди где находишься, если ты посередине, то не сдвинешься.

еслиblock, как будто элемент стоит (сверху вниз), если онinline, как если бы элемент лежал (слева направо). Конечно, предполагается, что по умолчаниюwriting-mode: horizontal-tb.

Маленький круглый? Приезжайте в каштаны Kangkang:код спрей.IO/Антияпонское производство 77/…

Ну, это значит убить Мэтта, о нет,scrollсемейные характеристики. (Брошенные или готовые к заброшенным не будут написаны выше.)

Наконец, давайте также посмотрим на совместимость:

Ну да ладно, IE можно использовать. . .

До сих пор семейство Kill Matt в нашей веб-AP, о нет, было представлено семейство прокрутки, напримерElement.scrollIntoViewIfNeedТакого API, которое не красит волосы (не стандартное) внедрять не будет.Если интересно, можете пойти и посмотреть, что оно умеет.

CSS scroll

После совместного использования JS вscroll, давайте посмотрим на CSSscroll.

scroll-behavior

Мы говорим об этом JS в приведенном вышеscrollКогда слово упоминается несколько раз, называется «behavior".

Мммм, так что вы, ребята, догадались об этомscroll-behaviorс JSbehaviorЭто имеет значение?

Ну да, как вы уже догадались, это имеет значение.

(Толпа, поедающая дыни: «Никому нет дела до тебя~»)

scroll-behaviorс вышеуказаннымscrollв APIbehaviorТо же самое используется для определения эффекта анимации при прокрутке страницы.

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

Эффект можно посмотреть в DEMO в первом разделе этой статьи.

Совместимость следующая:

Scroll Snap

CSS Scroll Snapотносительно новый независимый модуль в CSS, его первая официальная версияМодуль CSS Scroll Snap Уровень 1Он также был выпущен 19 марта 2019 года.

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

Дайте мне милю giaogiao! Это замечательная функция~

Он разделен на две части, одна часть действует на контейнер прокрутки, а другая часть действует на относительные дочерние элементы прокрутки.Конкретные отношения следующие:

Действует на прокручиваемые контейнеры	Действует при прокрутке дочерних элементов
scroll-snap-type	scroll-snap-align
scroll-padding	scroll-snap-stop
	scroll-margin

scroll-snap-type

scroll-snap-typeАтрибуты определяют, можно ли захватить и выровнять текущий контейнер прокрутки, а также направление и строгость реализации.

Его необязательные значения направления:

• x: привязка к положению на оси X
• y: привязка к положению по оси Y
• block: фиксирует положение на оси блока (логически то же самое, что и y)
• inline: привязка к положению на встроенной оси (логически то же самое, что и x)
• both: Привязка к положению в обоих направлениях

Его необязательные строгие значения:

• none: по умолчанию, Мммм, ничего не делать
• proximity: воспринимаемое значение. Если элемент попадает в диапазон позиции захвата контейнера, он будет захвачен и прокручен. В противном случае это не имеет значения. Что касается диапазона, он должен составлять около 45% позиции (измерено вручную, Конкретных подробностей W3C не сообщил.Алгоритм,угадайте,хахаха).
• mandatory: Надежное значение, пока есть параметры, оно обязательно выровняется, когда вы перестанете прокручивать.

Давайте перейдем к Канкану, каков эффект этой штуки:

Приведенное выше DEMO взято из MDN.scroll-snap-type

scroll-snap-align

scroll-snap-alignСвойство задает положение привязанного дочернего элемента, к которому привязывается контейнер привязки. Необязательные значения следующие:

• none: По умолчанию ничего не делать 0.0.
• start: Совместите с начальным положением.
• end: Выровняйте с конечным положением.
• center: Выравнивание по центру.

Эффект следующий:

Приведенное выше DEMO от Энди Адамса.scroll-snap-align

scroll-snap-stop

потому чтоScroll Snapэлементы будут иметь несколько позиций привязки, иscroll-snap-stopВы можете выбрать, будет ли вас захватывать после достижения этих позиций, или вас будут захватывать только тогда, когда вы достигнете указанной позиции. Необязательные атрибуты следующие:

• normal: значение по умолчанию, при прокрутке положение привязки можно игнорировать.
• always: При прокрутке положение привязки нельзя игнорировать, и положение первого элемента привязки должно быть позиционировано.

Каштаны бывают следующие:

Приведенное выше DEMO взято из MDN.scroll-snap-stop

scroll-margin

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

когда мы нажимаем#hashпри прыжках.

Нормальная операция:

h3 {
}

Добавленscroll-margin-top:

h3 {
  scroll-margin-top: 5rem;
}

Вышеупомянутое DEMO взято из книги Криса Койера.Fixed Headers and Jump Links? The Solution is scroll-margin-top

Из приведенных выше двух DEMO мы можем ясно сравнить, предполагая#hashЭлементы навигации были измененыscroll-marginтогда последнее положение прыжка будетscroll-marginЗначение ограничено.

Мало того, давайте посмотрим на следующее DEMO:

Вышеупомянутая ДЕМО-версия от Энди Адамса.scroll-margin

когда мы устанавливаемscroll-marginКогда элемент скролла попадает в видимую область скролла, браузерscroll-marginзначение, перейдите в соответствующую позицию.

scroll-marginПереопределенными свойствами являются следующие:

• scroll-margin-top
• scroll-margin-right
• scroll-margin-bottom
• scroll-margin-left
• scroll-margin-block
• scroll-margin-inline
• scroll-margin-block-start
• scroll-margin-inline-start
• scroll-margin-block-end
• scroll-margin-inline-end

scroll-padding

scroll-paddingа такжеscroll-marginтипа, только сpaddingа такжеmarginТо же самое, есть разница между внутренними и внешними полями.

Приходите на ДЕМО:

Вышеупомянутая ДЕМО-версия от Энди Адамса.scroll-padding

scroll-paddingПереопределенные свойства также имеют следующее:

• scroll-padding-top
• scroll-padding-right
• scroll-padding-bottom
• scroll-padding-left
• scroll-padding-block
• scroll-padding-inline
• scroll-padding-block-start
• scroll-padding-inline-start
• scroll-padding-block-end
• scroll-padding-inline-end

Вышеупомянутая совместимость API выглядит следующим образом:

CSS overscroll

overscroll-behavior

overscroll-behaviorВпервые опубликовано W3C в июне 2019 г.CSS Transition Scrolling Behavior Module Уровень 1единственное имущество в нем.

overscroll-behaviorПозволяет контролировать поведение браузера при прокрутке до границ.

Это также сокращенное свойство, и конкретные свойства:

• overscroll-behavior-x: при нормальных обстоятельствах обрабатывается поведение, когда горизонтальная полоса прокрутки прокручивается до границы.
• overscroll-behavior-y: при нормальных обстоятельствах обрабатывается поведение, когда полоса прокрутки по вертикальной оси прокручивается до границы.
• overscroll-behavior-inline:а такжеoverscroll-behavior-xТакой же.
• overscroll-behavior-block:а такжеoverscroll-behavior-yТакой же

Необязательные значения:

• auto: По умолчанию.
• contain: Когда элемент прокручивается до границы, это больше не влияет на соседние прокручиваемые элементы.
• none: когда элемент прокручивается до границы, это не только не влияет на соседние прокручиваемые элементы, но даже прокрутка до границы по умолчанию будет заблокирована.

Каштаны бывают следующие:

использовалoverscroll-behavior: contain;

По умолчанию

Совместимость следующая:

внеклассная поза

старые и новые логические свойства

Не знаю, обращали ли вы внимание на значения вышеперечисленных атрибутов, кроме обычногоx,y,top,right,bottomа такжеleftКроме того, есть четыре менее распространенных значенияblock,inline,startа такжеend.

Так что же это такое?

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

Для таких стран, как наша страна или США, документы располагаются сверху вниз, слева направо,top,right,bottomа такжеleftЭто легко понять.

Однако в таких странах, как Япония или Аравия, чей порядок письма отличается от нашего, будут логически необоснованные места, такие как:

• В Аравии ихpadding-leftСобственно направление нашеpadding-right
• В Японии ихpadding-leftСобственно направление нашеpadding-top

В свете вышеизложенного это довольно странно. Поэтому W3C выходит с новыми логическими атрибутами, и сравнение между старыми и новыми выглядит следующим образом:

старое логическое свойство	новое логическое свойство
top	inset-block-start
bottom	inset-block-end
left	inset-inline-start
right	inset-inline-end
margin-top	margin-block-start
margin-right	margin-inline-end
margin-bottom	margin-block-end
margin-left	margin-inline-start
border-top	border-block-start
border-right	border-inline-end
border-bottom	border-block-end
border-left	border-inline-start
padding-top	padding-block-start
padding-right	padding-inline-end
padding-bottom	padding-block-end
padding-left	padding-inline-start
width	inline-size
height	block-size

Подводя итог, абсциссаinline, ординатаblock, начинается сstart, заканчивающийся наend.

Наконец-то спецэффект

это эксплойтscroll-behavior: smoothЭффект, написанный характеристиками, мы пошли играть с друзьями раньше, мы провели много мероприятий. Одна из игр - «Ты угадал, я угадал».Как планировщик, рыбья голова, естественно, не могла упустить эту возможность, поэтому он использовал свои навыки, чтобы покрасоваться.

Давайте сначала посмотрим на эффект.

Адрес источника здесь:

код спрей.IO/Антияпонское производство 77/…

Поскольку код слишком длинный, он не опубликован полностью, но основная логика заключается в использованииscroll-behavior: smooth;контролировать#hashЭффект прыжка, чтобы не загрязнять урл, заодно использоватьhistory apiдля поддержания нормального URL. Наверное соус фиолетовый:

let pageIndex = 1;
const urlChangeHandler = event => {
  const { newURL } = event;
  const current = newURL.replace(/.+\#page\-(\d)/, "$1");
  pageIndex = +current;
  console.log(pageIndex);
  history.pushState(
    {},
    window.location.href,
    window.location.origin + window.location.pathname
  );
};
window.onhashchange = urlChangeHandler;

Вы также можете попытаться добавить интереса к своей жизни с помощью поз, которые вы освоили~

постскриптум

Люди, которые едят дыни: я прочитал всю статью, но не увидел ничего связанного с ниндзюцу? Ложись на мой трафик и теряй деньги.

Рыба голова: почему нет? Что вы подразумеваете, побаловать меня теперь, когда вы злитесь на меня?

использованная литература

1. scrollIntoView block vs inline
2. CSSOM View Module
3. Element.scrollIntoView()
4. CSS Scroll Snap Module Level 1
5. CSS TRICK scroll-snap-type
6. MDN scroll-snap-type
7. CSS TRICK scroll-snap-align
8. scroll-snap-stop
9. scroll-margin
10. scroll-padding
11. Fixed Headers and Jump Links? The Solution is scroll-margin-top
12. caniuse

постскриптум

Если вам нравится обсуждать технологии или у вас есть какие-либо комментарии или предложения по этой статье, вы можете добавить друзей Yutou в WeChat для совместного обсуждения.Конечно, Yutou также надеется поговорить с вами о жизни, хобби и поболтать. WeChat ID Fish Head: krisChans95