Схоплення прокручення CSS

Модуль Схоплення прокручення CSS пропонує властивості, що дають змогу контролювати логіку панорамування та прокручення, визначаючи позиції схоплення. Вміст може бути схоплений у позиції, коли користувач прокручує переповнений вміст у межах прокрутного контейнера, надаючи поділ на сторінки та позиціювання прокручення.

Цей модуль містить властивості прокрутних відступів прокрутного контейнера, призначені для оптимального перегляду регіону шляхом поділу на сторінки під час виконання прокручення-до-елемента. Серед них також присутні scroll-margin і scroll-alignment, що задаються на дочірніх елементах прокрутного контейнера, призначені для налаштування візуальної області такого елемента, коли до цього елемента відбувається прокручення, а також властивість для примусової зупинки прокручення на окремому дочірньому елементі.

Схоплення прокручення в дії

Щоб побачити в рамці нижче схоплення прокручення, прокрутіть вгору-вниз і вліво-вправо по сітці з 45 пронумерованих рамок у прокрутній області перегляду. Клацніть "Відтворити" у прикладі нижче, щоб переглянути або редагувати вихідний код на Ігровому майданчику MDN:

const positions = ["start", "center", "end"];
const inlineDirection = document.getElementById("inline");
const blockDirection = document.getElementById("block");
const stop = document.getElementById("stop");
const snap = document.getElementById("snap");
const all = document.querySelector("article");
const rules = document.styleSheets[0].cssRules;

inlineDirection.addEventListener("change", () => {
  setSSA();
});
blockDirection.addEventListener("change", () => {
  setSSA();
});
stop.addEventListener("change", () => {
  setSST();
});
window.addEventListener("load", () => {
  setSST();
  setSSA();
});
snap.addEventListener("change", () => {
  all.classList.toggle("snapDisabled");
});

function setSSA() {
  rules[0].style.scrollSnapAlign = `${positions[blockDirection.value]} ${
    positions[inlineDirection.value]
  }`;
}

function setSST() {
  if (stop.checked) {
    rules[0].style.scrollSnapStop = "always";
  } else {
    rules[0].style.scrollSnapStop = "normal";
  }
}

<article>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div>
    <fieldset>
      <legend>Змінити налаштування</legend>
      <p>
        <label
          ><input
            type="range"
            min="0"
            max="2"
            value="1"
            list="places"
            id="block" />
          блокова позиція</label
        >
      </p>
      <p>
        <label>
          <input
            type="range"
            min="0"
            max="2"
            value="1"
            list="places"
            id="inline" />
          рядна позиція
        </label>
      </p>
      <p>
        <label>
          <input type="checkbox" id="stop" />
          Заборонити прокручення поза рамки
        </label>
      </p>
    </fieldset>

    <p>
      <label><input type="checkbox" id="snap" /> вимкнути схоплення</label>
    </p>

    <datalist id="places">
      <option value="0">start</option>
      <option value="1">center</option>
      <option value="2">end</option>
    </datalist>
  </div>
</article>

li {
  /*
  починається з:
      scroll-snap-align: center center;
      scroll-snap-stop: normal (усталене);

  CSS змінюється за допомогою JavaScript, коли змінюються елементи керування.
  можна задати наступні значення:
      scroll-snap-stop: always | normal;
      scroll-snap-align: start | center | end {2}
        */
}
ul {
  overflow: auto;
  scroll-snap-type: both mandatory;
  overscroll-behavior-x: contain;
}
article.snapDisabled fieldset {
  opacity: 20%;
  pointer-events: none;
}
article.snapDisabled ul {
  scroll-snap-type: initial;
  overscroll-behavior-x: initial;
}

@layer pageSetup {
  article {
    display: flex;
    gap: 2vw;
  }
  div {
    flex: 1;
  }
  ul {
    display: grid;
    gap: 6.25vw;
    padding: 12.5vw;
    box-sizing: border-box;
    border: 1px solid;
    grid-template-columns: repeat(5, 1fr);
    background: conic-gradient(
      at bottom left,
      red 0deg,
      yellow 15deg,
      green 30deg,
      blue 45deg,
      purple 60deg,
      magenta 75deg
    );
    background-attachment: local;
    margin: auto;
    width: 20vw;
    height: 20vw;
  }
  li {
    scroll-snap-align: center;
    height: 12.5vw;
    width: 12.5vw;
    outline: 3px inset;
    list-style-type: none;
    background: white;
    font-family: monospace;
    font-size: 3rem;
    line-height: 12vw;
    text-align: center;
    counter-increment: items 1;
  }
  li::after {
    content: counter(items);
  }
  input {
    vertical-align: bottom;
  }
  p {
    font-family: monospace;
  }
}

Завдяки схопленню прокручення одна з пронумерованих рамок, до якої відбувається прокручення, встане на місце. Початковий CSS змушує цю рамку стати в центр області перегляду. Скористайтеся повзунами, аби змінити блокову та рядну позиції схоплення.

За допомогою властивостей схоплення можна дозволити або заблокувати прокручення за елемент, у цьому випадку – за пронумеровану рамку. Поставте галочку в полі "Заборонити прокручення за межі рамок", аби змусити всі прокрутні дії обмежуватися прокрученням до сусідньої рамки.

Аби порівняти схоплення прокручення зі звичайним прокрученням, поставте галочку в полі "вимкнути схоплення" і спробуйте прокрутити знову.

Довідка

Властивості на контейнерах

Властивості на дочірніх елементах

Події

Інтерфейси

SnapEvent
- SnapEvent.snapTargetBlock
- SnapEvent.snapTargetInline

Посібники

Базові концепції схоплення прокручення CSS: Огляд і приклади можливостей схоплення прокручення CSS.
Використання подій схоплення прокручення: Посібник з використання подій схоплення прокручення scrollsnapchanging і scrollsnapchange, які спрацьовують, коли браузер з'ясовує, що нова ціль схоплення перебуває в стані очікування чи вибрана.

Споріднені концепції

Псевдоклас :target
Властивість CSS overflow
Метод Element scroll()
Метод Element scrollBy()
Метод Element scrollIntoView()
Метод Element scrollTo()
Подія Element scroll
Подія Element scrollend
Роль ARIA scrollbar
Термін глосарія Прокрутний контейнер

Специфікації

Специфікація
CSS Scroll Snap Module Level 2 (CSS Scroll Snap 2)
CSS Scroll Snap Module Level 2 (CSS Scroll Snap 2)

Дивіться також

Модуль Переповнення CSS
Модуль Стилізації смуг прокручення CSS
Області прокручення лише клавіатурою на adrianroselli.com (2022)
Приклади схоплення прокручення на CodePen (2022)
Добрий контроль прокручення за допомогою схоплення прокручення CSS на web.dev (2021)
Практичне схоплення прокручення CSS на CSS-Tricks (2020)
Схоплення прокручення CSS на 12 Days of Web (2019)

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.