使用滚动捕捉类型在Chrome上对网站进行双滚动

如何解决使用滚动捕捉类型在Chrome上对网站进行双滚动

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

解决方法

绝对是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>

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

下面的代码片段为我解决了这个问题。

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

这差点让我崩溃:)

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

使用滚动捕捉类型在Chrome上对网站进行双滚动

如何解决使用滚动捕捉类型在Chrome上对网站进行双滚动

解决方法

相关推荐