如何在沒有頁面滾動的情況下製作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

你可以使用溢出：auto;或溢出：滾動;在CSS的div。

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

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

 
</div>