使用 scroll-snap-type 在 Chrome 上双滚动网站

Question

使用 scroll-snap-type 在 Chrome 上双滚动网站

Fél*_*ier 6 html css scroll scroll-snap scroll-snap-type

我希望我的部分占据整个页面，只要用户向上或向下滚动，就会出现上一个/下一个部分。它在 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>

Run Code Online (Sandbox Code Playgroud)

这是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;
}

Run Code Online (Sandbox Code Playgroud)

如果有人想自己查看，这里是该网站：在 Firefox 和/或 Chrome 中打开以查看不同之处

Answer 1

rai*_*7ow 5

绝对是 Chrome 中的一个错误。冒犯者似乎是background-color在容器元素上设置的 (!) 属性。

由于一些莫名其妙的原因，它的存在会触发wheel过度滚动......但仅在-kind 滚动上。键盘之一（使用 KeyUp/Down 或 PageUp/Down）工作正常。

这是 SRE；尝试滚动页面，然后按“修复 Chrome”按钮，然后再滚动一次 - 看看有什么不同。Version 86.0.4240.111 (Official Build) (64-bit)至少在 Chrome 86 中（准确地说是）。

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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

哇非常感谢！你是对的，问题似乎来自背景颜色属性。一旦我删除它，一切就完美了！我自己绝对不会想到这一点。再次感谢！:) (2认同)

归档时间：	5 年前
查看次数：	1563 次
最近记录：	4 年，3 月前