Full page view on single scroll move to next section

Question

I have tried to create single scroll and move to next section, I have using javascript, It is not working fine, The window top distance not giving properly, I need to div fullscreen moved to next screen, Please without jquery, Please help

  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

Return the height of the element and store it in distance variable, instead of giving it a static 900.

From this:

var distance = 900;

To this:

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