如何解决CSS滚动捕捉行为,例如Firefox
我在除macOS和android(经过Havent测试的Windows和ios)上的firefox之外的所有浏览器上都遇到了问题,其中滚动捕捉被延迟了。在Firefox上,它的运行效果很好,但是在Edge,Chrome和Safari上,它的运行被延迟了。有解决办法吗?
我的代码。
HTML:
<div class="scroll-snap-container">
<div>
<p>Long text here.</p>
<img src="some/image.png"/>
</div>
<div>
<p>Long text here.</p>
<img src="some/image.png"/>
</div>
<div>
<p>Long text here.</p>
<img src="some/image.png"/>
</div>
</div>
CSS:
.scroll-snap-container {
height: 100vh;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
overflow-scrolling: touch; /* Needed to work on iOS Safari */
overflow: auto;
}
.scroll-snap-container > div {
height: 100vh;
scroll-snap-align: start;
scroll-snap-stop: always;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。