JavaScript는 전체 화면 스크롤 기능을 구현합니다.

이 글은 주로 JavaScript 이벤트 응답과 페이지 요소 속성의 동적 동작과 관련된 구현 기술을 포함하여 기본 JavaScript로 구현된 전체 화면 스크롤 기능을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

원리:

1. 페이지를 넘길 때마다 표시되는 콘텐츠의 높이를 계산합니다.

2. 휠 이벤트의 브라우저 호환성 문제.

더 이상 쓸데없는 소리는 하지 말고 바로 코드로 넘어가자

html 코드:

<p id="wrap">
  <p id="main" style="top: 0;">
    <p class="content num1">
      <img  src="/static/imghwm/default1.png"  data-src="https://www.bing.com/az/hprichbg/rb/SingingRingingTree_ZH-CN12497946624_1920x1080.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="JavaScript는 전체 화면 스크롤 기능을 구현합니다." >
    </p>
    <p class="content num2">
      <img  src="/static/imghwm/default1.png"  data-src="https://www.bing.com/az/hprichbg/rb/ShenandoahNP_ZH-CN9981989975_1920x1080.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="JavaScript는 전체 화면 스크롤 기능을 구현합니다." >
    </p>
    <p class="content num3">
      <img  src="/static/imghwm/default1.png"  data-src="https://www.bing.com/az/hprichbg/rb/GareSaintLazare_ZH-CN6611772290_1920x1080.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="JavaScript는 전체 화면 스크롤 기능을 구현합니다." >
    </p>
    <p class="content num4">
      <img  src="/static/imghwm/default1.png"  data-src="https://www.bing.com/az/hprichbg/rb/FriendshipSquare_ZH-CN8820626148_1920x1080.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="JavaScript는 전체 화면 스크롤 기능을 구현합니다." >
    </p>
  </p>
</p>

css 코드:

#wrap{overflow: hidden;width: 100%;}
#main{top: 0;position: relative;}
.content{width: 100%;margin: 0;height: 100%;}
.num1{background: #e8e8e8;}
.num2{background: pink;}
.num3{background: yellow;}
.num4{background: orange;}

js 코드 :

<script type="text/javascript">
  var wrap = document.getElementById("wrap");
  var pHeight = window.innerHeight;
  wrap.style.height = pHeight + "px";
  var content = $(".content");//懒得写获取类的原生js代码了，直接用了jquery，=。=
  content.height(pHeight);
  var startTime = 0, //开始翻屏时间
    endTime = 0,
    now = 0;
  if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){
    //for firefox;
    document.addEventListener("DOMMouseScroll",scrollFun,false);
  }
  else if (document.addEventListener) {
    document.addEventListener("mousewheel",scrollFun,false);
  }
  else if (document.attachEvent) {
    document.attachEvent("onmousewheel",scrollFun);
  }
  else{
    document.onmousewheel = scrollFun;
  }
  //滚动事件处理函数
  function scrollFun(event){
      startTime = new Date().getTime();
      var delta = event.detail || (-event.wheelDelta);
      if ((endTime - startTime) < -1000) {
        //1秒内执行一次翻页
        if (delta > 0 && parseInt(main.style.top) > -pHeight * ( content.length - 1)) { //向下翻页
          now += pHeight ;
          turnPage(now);
        }
        if (delta < 0 && parseInt(main.style.top) < 0) { //向上翻页
          now -= pHeight ;
          turnPage(now);
        }
        endTime = new Date().getTime();
      }
      else{
        event.preventDefault();
      }
  }
  //翻页函数
  function turnPage(now){
    $("#main").animate({top:(-now+&#39;px&#39;)},1000);
    //懒得写动画代码了，直接用了jquery，=。=
  }
</script>

관련 권장 사항:

jQuery 플러그인 fullPage.js를 사용하면 전체 화면 스크롤 효과를 얻을 수 있습니다.

jquery_javascript 기술을 기반으로 전체 화면 스크롤 효과를 얻을 수 있습니다.

jquery를 사용하면 전체 화면 스크롤 효과를 얻을 수 있습니다_jquery

위 내용은 JavaScript는 전체 화면 스크롤 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!