如何在没有页面本身滚动的情况下制作div滚动？

Question

我遇到了这个site，并认为效果非常惊人。我希望以某种身份复制这种效果。我知道它将涉及css和javascript。让div渲染并以屏幕为中心非常容易。我遇到的问题是让每个人滚动屏幕而不是屏幕本身滚动。可以用什么效果或策略来达到这个目的？

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

Answer 1

  

无论如何，您需要一点JavaScript 来完成您提供的链接中显示的效果。

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

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>

Answer 2

你可以在div的css中使用 overflow：auto; 或 overflow：scroll; 。

＆＃13;

＆＃13;

.container {
  
   height: 100px; 
   overflow: auto; /*you can also use overflow: scroll; option */
}

＆＃13;

<div class ='container'>
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>

</div>

＆＃13;

＆＃13;

＆＃13;