我希望我的部分占据整个页面，只要用户向上或向下滚动，就会出现上一个/下一个部分。它在 Firefox 和 Chromium-Edge 上完美运行，但是当我在 Chrome 上测试它时，它总是跳过一个部分(从第 1 节到第 3 节，从第 3 节回到第 1 节)。我能做些什么来解决这个问题？
这是 HTML:
<div class="page container">
<div class="section section1">
...
</div>
<div class="section section1">
...
</div>
<div class="section section2">
...
</div>
<div class="section section3">
...
</div>
</div>
.container{
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
/* Scroll Snap */
scroll-snap-type: y mandatory;
}
.section{
position: relative;
width: 100%;
height: 100%;
scroll-snap-align: start;
display: flex;
align-items: center;
justify-content: center;
}
最佳答案
绝对是 Chrome 中的一个错误。罪犯似乎是background-color (!) 属性设置在容器元素上。
由于某些莫名其妙的原因，它的存在会触发过度滚动......但仅适用于 wheel -亲切的卷轴。键盘之一(使用 KeyUp/Down 或 PageUp/Down)工作正常。
这是 SRE；尝试滚动页面，然后按“修复 Chrome”按钮，然后再滚动一次 - 看看有什么不同。至少在 Chrome 86( Version 86.0.4240.111 (Official Build) (64-bit) ，准确地说)中。
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.break-things {
background-color: #f3f3f3;
}
.container {
position: relative;
width: 100%;
height: 100vh;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.item {
scroll-snap-align: start;
font-size: 7rem;
height: 77vh;
}
.item1 {
background-color: blue;
}
.item2 {
background-color: yellow;
}
.item3 {
background-color: red;
}<body>
<header><button type=button>FIX CHROME SCROLL SNAP</button></header>
<div class="container break-things">
<div class="item item1">Hello World</div>
<div class="item item2">Hello World</div>
<div class="item item3">Hello World</div>
</div>
<script>
let isChromeBroken = true;
document.querySelector('button').onclick = (ev) => {
isChromeBroken = !isChromeBroken;
ev.target.textContent = `${isChromeBroken ? 'FIX' : 'BREAK'} CHROME SCROLL SNAP`;
document.querySelector('.container').classList.toggle('break-things');
}
</script>
</body>关于html - 使用 scroll-snap-type 在 Chrome 上双滚动网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64581125/