我正在使用可滚动元素创建一个图像库。我正在使用 CSS 的scroll-snap功能,它允许我捕捉到滚动条中的元素(图像)。
通过绑定到元素的scroll事件,我在用户滚动元素时应用各种操作(例如预加载、隐藏界面元素等)。其中之一取决于滚动事件,并且需要在滚动完成的确切时刻停止。但是滚动快照给我带来了一种无法预见但尚未处理的情况;
我无法准确确定快速滚动操作是否完成。
我可以在每个滚动上设置一个setTimeout,它会自行取消并重新设置 - 有效地消除抖动 - 如果不重置,最后会被调用。但是设置此值时使用的超时可能意味着在确定滚动完成时“为时已晚”。
底线:如何检查滚动是否完成,因为:
scroll-snap-type已设置)前提
我正在尝试制作一个用户可以在其上滚动的数字列表选择器。选定的数字应该与center容器的形状对齐。一旦选择了一个数字,就应该放大它并改变颜色。
问题
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)