我一直在开发一个带有屏幕填充“幻灯片”的单页网站,如果可能的话,我真的很想使用滚动捕捉。几天前我让它运行得很好,但是自从 Chrome 更新以来,整个事情都被打破了:当使用滚轮时,它不是平滑地捕捉到一张幻灯片,而是一次快速地跳过两张幻灯片。
起初我认为这是因为我也在使用 jQuery/JS 来控制一些滚动事件,但我只是注意到启发我采用这种方法的原始笔有完全相同的问题。事实上,当完全关闭 JS 甚至将代码剥离到最基本的部分时,它仍然无法正常工作。
原笔: https ://codepen.io/team/css-tricks/pen/yLLqqgP
编码:
html, body {
scroll-snap-type: mandatory; /* for older browsers */
scroll-snap-points-y: repeat(100vh); /* for older browsers */
scroll-snap-type: y mandatory;
}
.scrollsnap-section {
height: 100vh;
scroll-snap-align: start;
position: relative;
}
//
<body>
<section id="slide-1" class="scrollsnap-section">
<h2>slide 1</h2>
</section>
<section id="slide-2" class="scrollsnap-section">
<h2>slide 2</h2>
</section>
</body>
有人知道这里发生了什么吗?它适用于所有其他现代浏览器,并且曾经在 Chrome 中运行,直到更新到版本 81。