Detailed explanation of full-screen scrolling function implemented by native javascript

This article mainly introduces the full-screen scrolling function implemented by native javascript, involving implementation techniques related to javascript event response and dynamic operation of page element attributes. Friends in need can refer to the following

The examples in this article describe the implementation of native javascript full screen scrolling function. Share it with everyone for your reference, the details are as follows:

Principle:

1. Calculate the current browser screen height and display it every time you turn the page The content height is the screen height

2. Monitor the mouse wheel event and pay attention to the browser compatibility issues of the wheel event.

Without further ado, let’s go straight to the code

html code:

<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="Detailed explanation of full-screen scrolling function implemented by native 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="Detailed explanation of full-screen scrolling function implemented by native 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="Detailed explanation of full-screen scrolling function implemented by native 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="Detailed explanation of full-screen scrolling function implemented by native javascript" >
    </p>
  </p>
</p>

css code:

#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 code:

<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>

The above is the detailed content of Detailed explanation of full-screen scrolling function implemented by native javascript. For more information, please follow other related articles on the PHP Chinese website!