使用滚动捕捉类型在Chrome上对网站进行双滚动 [英] Website double-scrolling on Chrome using scroll-snap-type
问题描述
我希望我的部分占据整个页面，并且当用户向上或向下滚动时，上一个/下一个部分就会出现.它可以在Firefox和Chromium-Edge上完美运行，但是当我在Chrome上对其进行测试时，它总是会跳过一个部分(从第1节到第3节，从第3节回到第1节).我该怎么办才能解决这个问题?
I want my sections to take the whole page and as soon as the user scrolls up or down, the previous/next section comes up. It works perfectly on Firefox and on Chromium-Edge, but when I tested it on Chrome, it always skips a section (goes from section1 to section 3 and from section 3 back to section 1). What can I do to solve this problem?
这是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>
这是CSS:
.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;
}
如果有人想自己看看，这里是网站:在Firefox和/或Chrome中打开以查看区别
here is the website if anyone wants to see by themselves : Open in Firefox and/or Chrome to see difference
推荐答案
绝对是Chrome中的错误.犯罪者似乎是在容器元素上设置的 background-color (！)属性.
Definitely a bug in Chrome. The offender seems to be background-color (!) property set on the container element.
出于某些莫名其妙的原因，它的存在会触发过度滚动……但只能在 wheel 类滚动条上进行.键盘之一(使用KeyUp/Down或PageUp/Down)可以正常工作.
For some inexplicable reasons its presence triggers overscrolling... BUT only on a wheel-kind scroll. The keyboard one (either with KeyUp/Down or PageUp/Down) works fine.
这里是SRE；尝试滚动页面，然后按修复Chrome"按钮，然后再滚动一遍-并查看两者之间的区别.至少在Chrome 86(准确地说，是版本86.0.4240.111(正式版本)(64位))中.
Here's SRE; try scrolling the page, then press 'Fix Chrome' button, then scroll one more time - and see the difference. In Chrome 86 (Version 86.0.4240.111 (Official Build) (64-bit), to be precise), at least.
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>这篇关于使用滚动捕捉类型在Chrome上对网站进行双滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
