相关疑难解决方法(0)

确定 snap-scroll 元素的 snap-scroll 事件是否完成

抽象的

我正在使用可滚动元素创建一个图像库。我正在使用 CSS 的scroll-snap功能,它允许我捕捉到滚动条中的元素(图像)。

通过绑定到元素的scroll事件,我在用户滚动元素时应用各种操作(例如预加载、隐藏界面元素等)。其中之一取决于滚动事件,并且需要在滚动完成的确切时刻停止。但是滚动快照给我带来了一种无法预见但尚未处理的情况;

我无法准确确定快速滚动操作是否完成。

我可以在每个滚动上设置一个setTimeout,它会自行取消并重新设置 - 有效地消除抖动 - 如果不重置,最后会被调用。但是设置此值时使用的超时可能意味着在确定滚动完成时“为时已晚”。

底线:如何检查滚动是否完成,因为:

  1. 用户已停止滚动,或者;
  2. 滚动条已到达其捕捉点(scroll-snap-type已设置)

javascript css animation easing scroll-snap

9
推荐指数
1
解决办法
8763
查看次数

CSS 滚动捕捉与动画效果

前提

我正在尝试制作一个用户可以在其上滚动的数字列表选择器。选定的数字应该与center容器的形状对齐。一旦选择了一个数字,就应该放大它并改变颜色。


问题

  • 如何将第一个或最新的项目捕捉到容器的中心?
  • 是否有 CSS 或 JavaScript 方法来检测数字是否对齐中心,然后selected为其分配类?
  • 不要依赖任何插件。

* {
  box-sizing: border-box;
  font-family: Roboto, sans-serif;
}

.container {
  display: flex;
  flex-direction: row;
  width: 10rem;
  height: 22rem;
  border-radius: 3rem;
  border: solid 0.2rem #b2b2c2;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scrollport {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 9.4rem;
  height: 22rem;
  overflow: auto;
  scroll-snap-type: y mandatory;
}

.cell {
  display: block;
  scroll-snap-align: center;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 33.3%;
  display: flex;
  justify-content: …
Run Code Online (Sandbox Code Playgroud)

html javascript css animation scroll

1
推荐指数
1
解决办法
6620
查看次数

标签 统计

animation ×2

css ×2

javascript ×2

easing ×1

html ×1

scroll ×1

scroll-snap ×1