About the method of implementing single page/full screen scrolling similar to fullpage in native js-JS Tutorial-php.cn

About the method of implementing single page/full screen scrolling similar to fullpage in native js

不言

Release： 2018-06-26 15:37:59

Original

1683 people have browsed it

This article mainly introduces the implementation method of using native js to achieve full-screen scrolling similar to fullpage. The complete example code is given in the article. I believe it has certain reference value for everyone's understanding and learning. Friends in need can refer to it. For reference, let’s take a look below.

Preface

Single-page/full-screen scrolling pages are becoming more and more common. They are mostly used for simple pages with less content such as product introductions and recruitment. Many jQuery plug-ins have appeared for this effect. The effect achieved in this article is similar to the single-screen scrolling of fullpage. It is implemented using native JS and does not rely on any js library;

css code:

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

Copy after login

html code:

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

Copy after login

js code:

document.addEventListener("DOMContentLoaded", function() {
 var body = document.body,
 html = document.documentElement;
 var itv, height = document.body.offsetHeight;
 var page = scrollTop() / height | 0;
 //窗口大小改变事件
 addEventListener("resize", onresize, false);
 onresize();
 //滚轮事件
 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();
 }
 );
 //平滑滚动
 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事件
 function onresize() {
 height = body.offsetHeight;
 move();
 };
 //获取或设置scrollTop
 function scrollTop(v) {
 if (v == null) return Math.max(body.scrollTop, html.scrollTop);
 else body.scrollTop = html.scrollTop = v;
 };
});

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website !

Related recommendations:

How to determine whether the iframe is loaded through JS

How to use JS to implement a WeChat payment pop-up window Function

About JavaScript to create a simple frame chart

# #

The above is the detailed content of About the method of implementing single page/full screen scrolling similar to fullpage in native js. For more information, please follow other related articles on the PHP Chinese website!