单滚动显示全页视图移至下一部分

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

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

由此：

var distance = 900;

对此：

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