Native js implements single page/full screen scrolling similar to fullpage

Preface

Single-page/full-screen scrolling pages are becoming more and more common, and they are mostly used for simple pages with less product introduction, recruitment and other content. There are also many jQuery plug-ins for this effect. The effect implemented in this article is similar to the single-screen scrolling of fullpage, which is implemented using native JS and does not rely on any js library;

css code:

html,body {height:100%;}
body {margin:0px;}
div {height:100%;}

html code:

<div style="background:#FEE;"></div>
<div style="background:#EFE;"></div>
<div style="background:#EEF;"></div>
<div style="background:red;"></div>

js code:

("DOMContentLoaded", function() {
 var body = ,
 html = ;
 var itv, height = ;
 var page = scrollTop() / height | 0;
 //The window size change event addEventListener("resize", onresize, false);
 onresize();
 //Scroller event (
 "onwheel" in document ? "wheel" : "mousewheel",
 function(e) {
  clearTimeout(itv);
  itv = setTimeout(function() {
  var delta =  / 120 || - / 3;
  page -= delta;
  var max = ( / height | 0) - 1;
  if (page &lt; 0) return page = 0;
  if (page &gt; max) return page = max;
  move();
  }, 100);
  ();
 }
 );
 //Smooth scrolling function move() {
 var value = height * page;
 var diff = scrollTop() - value;
 (function callee() {
  diff = diff / 1.2 | 0;
  scrollTop(value + diff);
  if (diff) itv = setTimeout(callee, 16);
 })();
 };
 //resize event function onresize() {
 height = ;
 move();
 };
 //Get or set scrollTop function scrollTop(v) {
 if (v == null) return (, );
 else  =  = v;
 };
});

Please click online demonstration：here

Summarize

The above is the entire content of this article. I hope the content of this article will be of some help to your study or work. If you have any questions, you can leave a message to communicate.