À propos de la méthode d'implémentation du défilement d'une seule page/plein écran similaire à la page complète dans js natif

Cet article présente principalement la méthode d'implémentation consistant à utiliser js natif pour obtenir un défilement plein écran similaire à celui d'une page entière. L'exemple de code complet est donné dans l'article. Je pense qu'il a une certaine valeur de référence pour la compréhension et l'apprentissage de tous les amis qui en ont besoin. il peut y faire référence. Pour référence, jetons un œil ci-dessous.

Avant-propos

Les pages défilantes d'une seule page/plein écran sont de plus en plus courantes. Elles sont principalement utilisées pour des pages simples avec moins de contenu, telles que les introductions de produits et. recrutement. De nombreux plug-ins jQuery sont apparus pour cet effet. L'effet obtenu dans cet article est similaire au défilement d'une page entière sur un seul écran. Il est implémenté à l'aide de JS natif et ne repose sur aucune bibliothèque js ; 🎜>code css :

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

code html :

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

code js :

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;
 };
});

Ce qui précède est l'intégralité du contenu de cet article. j'espère que cela sera utile à l'étude de tout le monde. Plus connexes Veuillez faire attention au site Web PHP chinois pour le contenu !

Recommandations associées :

Comment utiliser JS pour déterminer si l'iframe est chargé

Comment utiliser JS pour implémenter une fenêtre pop-up de paiement WeChat Fonction

À propos de JavaScript pour créer un diagramme en boîte simple

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!