javascript - 如何在页面本身不滚动的情况下使 div 滚动？

Question

我遇到了这个site并认为效果真的很棒。我希望以某种身份复制这种效果。我知道它将涉及 css 和 javascript。让 div 在屏幕上呈现和居中非常容易。我遇到的问题是让每个人都滚动屏幕而不是屏幕本身滚动。可以使用什么效果或策略来实现这一点？

编辑:我不希望使用 javascript 或外部库方法。谢谢

Answer 1

No matter what, you will need a little bit of JavaScript to accomplish the effect shown in the link you provided.

这是一个或多或少显示效果如何工作的示例:

var active = 0;
var divs = document.querySelectorAll('.wrap > div')

function onScroll(){

  var winHeight = window.innerHeight
  var scrollAmt = document.body.scrollTop;
  var newActive = Math.floor( scrollAmt / winHeight )
  
  if( active != newActive ){
    active = newActive;
    
    divs.forEach(function(el, indx){
      if( indx <= active )
        el.classList.add('released')
      else
        el.classList.remove('released')
    })
    
  }
}

window.addEventListener('scroll', onScroll)

html, body {
  padding: 0;
  margin: 0;
}

.wrap {
  min-height: 400vh;
}

.wrap > div {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrap > div > div {
  width: 50%;
  height: 50%;
}

.wrap > div.first { z-index: 3; }
.wrap > div.second { z-index: 2; }
.wrap > div.third { z-index: 1; }

.wrap > div.first > div {
  background: blue;
  height: 60%;
}

.wrap > div.second > div {
  background: yellow;
  width: 55%;
  height: 55%;
}

.wrap > div.third > div{
  background: green;
  width: 60%;
}

.wrap > div.released {
  position: relative;
}

<div class="wrap">
  <div class="first released"><div></div></div>
  <div class="second"><div></div></div>
  <div class="third"><div></div></div>
</div>