如何解决为什么 css scroll snap 无法在 ios 较新版本上工作?
我已经实现了CSS Scroll Snap。我使用 chrome 开发工具在较小的屏幕上对其进行了测试。它仅适用于 Moto G4、Galaxy S5、Iphone 5/6/7/8 和 Galaxy Fold。 css 功能无法在较新版本的 Iphone 手机(如 6/7/8 plus 和 X)上运行。此外,它在 Ipad、Ipad pro 和 chrome 开发工具中的其他设备上失败。
我可能遗漏了什么?
HTML
<div class="inner">
<a href="#">Superfoods</a>
<a href="#">Snacks</a></li>
<a href="#">Frühstück</a></li>
<a href="#">Superfoods</a>
<a href="#">Snacks</a></li>
<a href="#">Frühstück</a></li>
<a href="#">Kochen & Backen</a>
<a href="#">Supplements</a>
<a href="#">Getränke</a>
<a href="#">Non-Food</a>
<a href="#">Sale</a>
<a href="#">Food Journal</a>
</div>
CSS
body{
margin: 0;
}
.inner{
-webkit-overflow-scrolling: touch;
margin: 0;
padding: 0;
list-style:none;
display: flex;
gap: 20px;
overflow-x: auto;
white-space: nowrap;
scroll-snap-type: x mandatory;
-webkit-scroll-snap-type: x mandatory;
-ms-scroll-snap-type: x mandatory;
width: 100%;
height: 60px;
}
a{
text-decoration: none;
color: black;
scroll-snap-align: start;
-webkit-scroll-snap-align: start;
-ms-scroll-snap-align: start;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。