ホームページ > 記事 > ウェブフロントエンド > フルページと同様のシングルページ/フルスクリーンスクロールをネイティブjsで実装する方法について
この記事では、フルページと同様の全画面スクロールを実現するためのネイティブ js の実装方法を主に紹介します。この記事には、すべての人の理解と学習に一定の参考価値があると思います。以下を見てみましょう。
はじめに
単一ページ/全画面スクロールのページは、主に製品紹介や採用情報などのコンテンツが少ないシンプルなページに使用されることが多くなっています。この効果のために多くの jQuery プラグインが登場しています。この記事で実現される効果は、ネイティブ JS を使用して実装されており、
CSS コードに依存しません。
html,body {height:100%;} body {margin:0px;} p {height:100%;}
HTMLコード:
<p style="background:#FEE;"></p> <p style="background:#EFE;"></p> <p style="background:#EEF;"></p> <p style="background:red;"></p>
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; }; });以上がこの記事の内容の全てだと思います。みんなの勉強に役立ちますその他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。 関連する推奨事項:
iframe が JS 経由で読み込まれているかどうかを判断する方法
JS を使用して模倣 WeChat 支払いポップアップ ウィンドウ機能を実装する方法
シンプルなボックスを作成するための JavaScript についてチャート
以上がフルページと同様のシングルページ/フルスクリーンスクロールをネイティブjsで実装する方法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。