ios - CSS 仅在 iOS 中滚动捕捉
<p><p>我正在尝试在应用中实现仅 CSS 的滚动捕捉行为，但发现 <strong>它在 iOS 中无法按预期工作</strong>。这里是 <a href="https://codepen.io/servernoj/pen/VgBqPB" rel="noreferrer noopener nofollow">CodePen</a> 的链接那个演示案例。</p>
<p>代码如下</p>
<p></p><div class="snippet"data-lang="js"data-hide="false"data-console="true"data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}
.two {
border-color: blue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="panel-container">
<div class="panel one">
One
</div>
<div class="panel two">
Two
</div>
</div></code></pre>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>容器需要 <code>-webkit-overflow-scrolling: touch</code> 和子 <code>overflow:visible</code> (在你的情况下他们已经有了)。</p></p>
<p style="font-size: 20px;">关于ios - CSS 仅在 iOS 中滚动捕捉，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/54677695/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/54677695/
</a>
</p>
页:
[1]