我试图在应用程序中实现 CSS only 滚动捕捉行为,但发现它在 iOS 中无法按预期工作。这是演示该案例的CodePen的链接。
代码附在下面
body, html {
height: 100%;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.panel-container {
width: 100%;
height: 50%;
border: 2px solid lightgray;
box-sizing: content-box;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-snap-type: mandatory;
scroll-snap-points-x: repeat(100%);
scroll-snap-destination: 0 0;
}
.panel {
scroll-snap-align: start;
border: 2px solid;
box-sizing: border-box;
min-width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.one {
border-color: red;
} …Run Code Online (Sandbox Code Playgroud)