Native js에서 전체 페이지와 유사한 단일 페이지/전체 화면 스크롤을 구현하는 방법에 대해

이 글은 전체 페이지와 유사한 전체 화면 스크롤을 달성하기 위해 기본 js를 사용하는 구현 방법을 주로 소개합니다. 글에 완전한 예제 코드가 제공되어 있어 도움이 필요한 모든 사람의 이해와 학습을 위한 특정 참조 가치가 있다고 생각합니다. 아래를 살펴보겠습니다.

머리말

단일 페이지/전체 화면 스크롤 페이지는 제품 소개, 모집 등 내용이 적은 간단한 페이지에 주로 사용됩니다. 이 효과를 위해 많은 jQuery 플러그인이 나타났습니다. 이 기사에서 얻은 효과는 전체 페이지의 단일 화면 스크롤과 유사합니다. 이는 기본 JS를 사용하여 구현되었으며 js 라이브러리에 의존하지 않습니다.

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 중국어 웹사이트를 주목하세요!

관련 추천:

JS를 통해 iframe이 로드되었는지 확인하는 방법

JS를 사용하여 WeChat 결제 팝업 기능을 구현하는 방법

간단한 상자 차트를 만드는 JavaScript에 대해

위 내용은 Native js에서 전체 페이지와 유사한 단일 페이지/전체 화면 스크롤을 구현하는 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!