javascript - 单滚动移动到下一部分的完整页面 View

Question

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

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

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

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

</div>

Answer 1

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

来自这里:

var distance = 900;

对此:

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