整頁瀏覽單滾動移動到下一部分

Question

我試圖創建單個滾動和移動到下一節，我已經使用JavaScript，它不能正常工作，窗口頂部距離不正常，我需要div全屏轉移到下一個屏幕，請不用jQuery的，請幫

\t if (window.addEventListener) {window.addEventListener('DOMMouseScroll', wheel, false); 
 
window.onmousewheel = document.onmousewheel = wheel;} 
 

 
function wheel(event) { 
 
    var delta = 0; 
 
    if (event.wheelDelta) delta = (event.wheelDelta)/120 ; 
 
    else if (event.detail) delta = -(event.detail)/3; 
 

 
    handle(delta); 
 
    if (event.preventDefault) event.preventDefault(); 
 
    event.returnValue = false; 
 
} 
 

 
function handle(sentido) { 
 
    var inicial = document.body.scrollTop; 
 
    var time = 500; 
 
\t var distance = 900; 
 

 
    animate({ 
 
    delay: 0, 
 
    duration: time, 
 
    delta: function(p) {return p;}, 
 
    step: function(delta) { 
 
window.scrollTo(0, inicial-distance*delta*sentido); 
 
    } 
 
    }); 
 
} 
 

 

 
function animate(opts) { 
 
    var start = new Date(); 
 
    var id = setInterval(function() { 
 
    var timePassed = new Date() - start; 
 
    var progress = (timePassed/opts.duration); 
 
    if (progress > 1) {progress = 1;} 
 
    var delta = opts.delta(progress); 
 
    opts.step(delta); 
 
    if (progress == 1) {clearInterval(id);}}, opts.delay || 10); 
 
}

body{ 
 
\t \t width: 100%; 
 
\t \t height: 100%; 
 
\t \t margin:0; 
 
\t \t padding:0; 
 
\t } 
 
\t .wrapper{ 
 
\t \t width: 100%; 
 
\t \t height: 100%; 
 
\t \t position: absolute; 
 
\t } 
 

 
\t section{ 
 
\t \t width: 100%; 
 
\t \t height: 100%; 
 
\t } 
 
\t .pg1{ 
 
\t \t background: green; 
 
\t } 
 

 
\t .pg2{ 
 
\t \t background: blue; 
 
\t } 
 

 
\t .pg3{ 
 
\t \t background: yellow; 
 
\t }

<div class="wrapper" id="myDiv"> 
 
\t <section class="pg1" id="sec1"></section> 
 
\t <section class="pg2"></section> 
 
\t <section class="pg3"></section> 
 

 
</div>

Answer 1

返回元素的高度，並將其存儲在距離變量，而不是給它一個靜態900

從這：

var distance = 900; 

要這樣：

var distance = document.getElementById('sec1').clientHeight;