CSS每100vh滚动捕捉

Question

我有一个400vh的长网页。我尝试每100vh捕捉一次，将用户的注意力集中在1个部分：

问题出在这里，我有一个background: linear-gradient(color1, color2,...);，它占用了页面的所有大小（400vh）

据此：CSS Scroll Snapping, vertical not working 我有这个CSS：

body {
    overflow : scroll;
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
    height: 400vh;
    background: linear-gradient(
        180deg,
        #28346f,
        #434f8b 25%,
        #f69d3c 40%,
        #2b9348 60%,
        #0278ae 77%,
        #51adcf 87%,
        #0278ae 100%
    );
}

#full {
overflow-y: scroll;
  height: 100vh;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
  }

  
.container{
    height: 100vh;
    width: 100vw;
    scroll-snap-align: start;
    position: relative;
}

因此，快照已开始工作，但仅停留在背景的前100vh上。

Answer 1

我在javascript中使用css滚动捕捉了自己，这可能会解决您的问题。

全屏观看

var scrollY = 0;
document.onkeydown = function(event) {
  event.preventDefault();
  if (event.keyCode == 40 || event.keyCode == 34) {

    scrollY >= 3 * document.documentElement.clientHeight ? scrollY = 3 * document.documentElement.clientHeight : scrollY += document.documentElement.clientHeight;
    window.scrollTo(0, scrollY);
  }
  if (event.keyCode == 38 || event.keyCode == 33) {
    scrollY <= 0 ? scrollY = 0 : scrollY -= document.documentElement.clientHeight;

    window.scrollTo(0, scrollY);
  }
  
};

* {
  margin: 0px;
  padding: 0px;
  scroll-behavior: smooth;
}

.page_1,
.page_2,
.page_3,
.page_4 {
  height: 100vh;
  width: 100%;
}

.page_1 {
  background-color: #0B7FEB;
}

.page_2 {
  background-color: #0063BF;
}

.page_3 {
  background-color: #01294F;
}

.page_4 {
  background-color: #000000;
}

<div class="page_1"></div>
<div class="page_2"></div>
<div class="page_3"></div>
<div class="page_4"></div>