Как подавить прокрутку импульса в CSS? - PullRequest
Новая
       15

Как подавить прокрутку импульса в CSS?

0 голосов
/ 15 января 2020

Можно ли с помощью чистого CSS избежать плавной прокрутки и привязки в ближайшем следующем положении привязки, используя CSS Scroll Snap ?

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

#scroll-container {
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  width: 100%;
  overflow-x: scroll;
  display: flex;
}

.item {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  margin-right: 10px;
  scroll-snap-align: center;
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
}
<div id="scroll-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

Насколько я понимаю, scroll-snap-stop должен работать иначе или реализация неверна?

И, что более важно, есть ли другой способ добиться принудительной остановки в следующей позиции привязки, когда пользователь прекратил прокрутку? Некоторое общее свойство, которое контролирует, есть ли какой-нибудь импульс после прокрутки? Я знаю, что есть scroll-behavior, хотя у него нет значения hard. Есть также связанный вопрос для отключения прокрутки импульса в Chrome явно , хотя я ищу решение, которое работает во всех текущих браузерах.

...