Heim > Web-Frontend > js-Tutorial > Über die Methode zum Implementieren eines Einzelseiten-/Vollbild-Scrollens ähnlich dem Ganzseiten-Scrolling in nativem JS

Über die Methode zum Implementieren eines Einzelseiten-/Vollbild-Scrollens ähnlich dem Ganzseiten-Scrolling in nativem JS

不言
Freigeben: 2018-06-26 15:37:59
Original
1755 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Implementierungsmethode für die Verwendung von nativem JS vorgestellt, um einen vollständigen Beispielcode für das Verständnis und Lernen aller Freunde zu finden Es kann sich darauf beziehen. Werfen wir als Referenz einen Blick darauf.

Vorwort

Einzelseitige/Vollbild-Bildlaufseiten werden immer häufiger verwendet. Sie werden meist für einfache Seiten mit weniger Inhalt wie Produkteinführungen usw. verwendet Werbung. Für diesen Effekt sind viele jQuery-Plugins erschienen. Der in diesem Artikel erzielte Effekt ähnelt dem Single-Screen-Scrolling. Er wird mit nativem JS implementiert und ist nicht auf eine js-Bibliothek angewiesen 🎜>CSS-Code:

html,body {height:100%;}
body {margin:0px;}
p {height:100%;}
Nach dem Login kopieren

HTML-Code:

<p style="background:#FEE;"></p>
<p style="background:#EFE;"></p>
<p style="background:#EEF;"></p>
<p style="background:red;"></p>
Nach dem Login kopieren

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;
 };
});
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er hilfreich sein wird Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

So verwenden Sie JS, um festzustellen, ob der Iframe geladen ist


So verwenden Sie JS zur Implementierung eine WeChat-Zahlungs-Popup-Fensterfunktion


Über JavaScript zum Erstellen eines einfachen Boxdiagramms


Das obige ist der detaillierte Inhalt vonÜber die Methode zum Implementieren eines Einzelseiten-/Vollbild-Scrollens ähnlich dem Ganzseiten-Scrolling in nativem JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage