单个滚动的整页视图移至下一部分

Question

我试图创建单个滚动并移动到下一部分，我使用javascript，它工作不正常，窗口顶部距离没有给出正确，我需要div全屏移动到下一个屏幕，请不要jquery，请帮助

＆＃13;

＆＃13;

  	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;
	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);
}

＆＃13;

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

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

	.pg2{
		background: blue;
	}

	.pg3{
		background: yellow;
	}

＆＃13;

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

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

返回元素的高度并将其存储在距离变量中，而不是给它一个静态的900。

由此：

var distance = 900;

对此：

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