Native js implements single-page/full-screen scrolling like fullpage, and full-screen jsfullpage

Native js implements single-page/full-screen scrolling like fullpage, and full-screen jsfullpage

Preface

Single-page/full-screen scrolling pages are more and more common. They are mostly used for simple pages with less content such as product introduction and recruitment. There have also been many jQuery plug-ins for this effect. The effect achieved in this article is similar to the single-screen scrolling of fullpage, which is implemented using native JS without relying 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:

Document. addEventListener ("DOMContentLoaded", function () {var body = document. body, html = document.doc umentElement; var itv, height = document. body. offsetHeight; var page = scrollTop ()/height | 0; // window size change event addEventListener ("resize", onresize, false); onresize (); // scroll event document. body. addEventListener ("onwheel" in document? "Wheel": "mousewheel", function (e) {clearTimeout (itv); itv = setTimeout (function () {var delta = e. wheelDelta/120 |-e. deltaY/3; page-= delta; var max = (document. body. scrollHeight/height | 0)-1; if (page <0) return page = 0; if (page> max) return page = max; move () ;}, 100 ); e. preventDefault () ;}); // smooth rolling 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 = body. offsetHeight; move () ;}; // obtain or set scrollTop function scrollTop (v) {if (v = null) return Math. max (body. scrollTop, html. scrollTop); else body. scrollTop = html. scrollTop = v ;};});

For online demonstration, click: Here

Summary

The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.