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

Question

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

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

如果有人想自己看，这里是网站：Open in Firefox and/or Chrome to see difference

Answer 1

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

由于某些莫名其妙的原因，它的存在会触发过度滚动......但仅限于wheel-kind 滚动。键盘（使用 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>

Answer 2

我在 Windows（不是 Mac）上的 Chrome 和 Opera 中遇到了同样的问题。但是如果我让页面的每个块都可以水平滚动，问题就解决了。

正如raina77ow 在他对这个案例的回答中所写，该错误仅在wheel 事件上触发。但就我而言，它不依赖于任何背景参数。

目前我只找到了基于此的解决方案：

html {
  scroll-snap-type: y mandatory;
}

.page {
  position: relative;
  scroll-snap-align: start;
  height: 100vh;
  overflow-x: auto;
}

.page::-webkit-scrollbar {
    display: none
}

.page::before {
  content: "";
  position: absolute;
  width: calc(100% + 1px);
  height: 1px;
}

<div class="container">
  <div class="page">
    Page 1
  </div>
  <div class="page">
    Page 2
  </div>
  <div class="page">
    Page 3
  </div>
  <div class="page">
    Page 4
  </div>
</div>

Answer 3

下面的 sn-p 为我解决了这个问题。

var canScroll = true;
    var scrollContainer = document.querySelector('html')
    scrollContainer.addEventListener('wheel', function(e) {
    if (canScroll) {
        scrollContainer.scrollBy(0, e.deltaY);
        canScroll = false;
        setTimeout(() => {
            canScroll = true;
        }, 800);
    }
    e.preventDefault();
    }, { passive: false });

html {
        height: 100%;
        scroll-snap-type: y mandatory;
          scroll-behavior: smooth;
        -ms-scroll-snap-type: mandatory;
    }

    div#section-1,div#section-2,div#section-3,div#section-4,div#section-5 {
        padding: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'LexiaLight';
        width: 100%;
    }

    div#section-1, div#section-2, div#section-3, div#section-4, div#section-5 {
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    div#section-1 {
        background: #264653;
    }

    div#section-2 {
        background: #2a9d8f;
    }

    div#section-3 {
        background: #e9c46a;
    }

    div#section-4 {
        background: #f4a261;
    }

    div#section-5 {
        background: #e76f51;
    }

    div#section-1, div#section-2, div#section-3, div#section-4, div#section-5{
      scroll-snap-align: start;
        scroll-snap-stop: always;
    }

<div id="section-1"></div>
<div id="section-2"></div>
<div id="section-3"></div>
<div id="section-4"></div>
<div id="section-5"></div>

Answer 4

这几乎让我崩溃了:)

我只是删除了container 元素上设置的background 属性，它已被修复。