Of Stack

javascript realizes page scrolling effect

  • 2021-07-12 04:51:06
  • OfStack

When we browse web pages, we often encounter cool web pages that can scroll the screen. Today, the author simply implements this technology, and the effect is not as cool as the reader's ideal. It mainly shares and analyzes the technical principles and ideas of scrolling. In this example, there are 5 digital labels on the right side of the page, representing 5 pages. Click the number to switch to the corresponding page, and scroll the mouse pulley to switch the digital labels and pages. The author has not realized the smooth scrolling of the page, so readers can experiment and study by themselves.

This is the html code: 


<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
 <div class="big-box" id="bigBox">
  <div class="item item1"><h1> Screen 1</h1></div>
  <div class="item item2"><h1> Screen 2</h1></div>
  <div class="item item3"><h1> Screen 3</h1></div>
  <div class="item item4"><h1> Screen 4</h1></div>
  <div class="item item5"><h1> Screen 5</h1></div>
 </div>
 <ul class="controls">
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
 </ul>
 <script src="behavior.js"></script>
 </body>
</html>

Here is the css structure code: 


*{margin:0; padding:0;}
html,body{
 width:100%;
 height:100%;
 overflow:hidden;
}
.big-box {
 width:100%;
 height:500%;
 text-align:center;
 position:absolute;
}
.big-box .item{
 height:20%;
}
.big-box .item1 {
 background-color:red;
}
.big-box .item2 {
 background-color:blue;
}
.big-box .item3 {
 background-color:purple;
}
.big-box .item4 {
 background-color:gold;
}
.big-box .item5 {
 background-color:pink;
}
.controls {
 list-style:none;
 position:absolute;
 top:20%;
 right:20px;
}
.controls li {
 width:50px;
 height:50px;
 font:bold 22px/50px " Song Style ";
 text-align:center;
 background-color:#000;
 color:#fff;
 cursor:pointer;
}
.controls li+li {
 margin-top:5px;
}
.controls li.active {
 background-color:#fff;
 color:red;
}

Here is the JavaScript code: 


/*
  Thoughts: 
  No. 1 1 Step: When the page is loaded, get the section object to be operated on 
  No. 1 2 Step: For document Add 1 Roller rolling events 
  No. 1 3 Step: Roller Rolling Switch 
   Gets the height of the viewable area of the current browser 
  var viewHeight = document.body.clientHeight
   The purpose of roller switching is to change bigBox Adj. top Value 
  top: Maximum 0
  top: Minimum  viewHeight*-4
   From top to bottom or from bottom to top: go at most 4 Times (5 Pages )  Every 1 Second walk viewHeight
   Key point of control: index   Fixed 1 Index  2
   Roller ↓ 
   Index +1
   Roller 
   Index -1
  bigBox.style.top = - Index *viewHeihgt 
*/
var bigBox = document.getElementById("bigBox");// Get bigBox Node object 
var lis = document.querySelectorAll(".controls li");// Gets all of the li Node object 
var viewHeight = document.body.clientHeight;// Get the current page height 
var flag = true;// Set switch 
var index = 0;// Set index 
// Encapsulation event , Compatible browser 
function on(obj,eventType,fn){
 if(obj.addEventListener){
 obj.addEventListener(eventType, fn);
 }else{
 obj.attachEvent("on" + eventType, fn);
 }
}
// Mouse scroll event handler 
function handler(e){
 var _e = window.event || e;
 if(flag){
 flag = false;
 if(_e.wheelDelta==120 || _e.detail==-3){// If the mouse wheel scrolls up, detail Judge the condition for Firefox 
  index--;
  if(index<0){
  index = 0;
  }
 }else{// Scroll down 
  index++;
  if(index>lis.length-1){// If the index is larger than the number of pages, it rolls to the end 1 When a page is opened, scroll the mouse again and the page will no longer scroll 
  index = lis.length-1;
  }
 }
 bigBox.style.top = -index*viewHeight + "px";//bigBox Move up as a whole index Pages 
 for(var i=0; i<lis.length; i++){
  lis[i].className = "";// Reset All li Class of 
 }
 lis[index].className = "active";// Sets the current li Class name of 
 setTimeout(function(){// Page scrolling interval 1 Seconds to prevent scrolling too fast 
  flag = true;// Reopen the switch 
 },1000);
 }
}
on(document,"mousewheel",handler);// Roller rolling event 
on(document,"DOMMouseScroll",handler);// Scroll wheel scroll event, adapted to Firefox browser 
// Digital tag click processing 
for(var i=0; i<lis.length; i++){
 lis[i].tag = i;
 lis[i].onclick = function(){
 for(var j=0; j<lis.length; j++){
  lis[j].className = "";
 }
 lis[this.tag].className = "active";
 bigBox.style.top = -this.tag*viewHeight + "px";
 }
}

The author separates html, css and javascript here, and readers can integrate them by themselves. The logical thinking of code writing is also simply explained in the code, which is convenient for readers to read and understand. The author here is only a simple scrolling technology, pure javascript technology, the effect is slightly unsatisfactory, readers can learn by themselves, this 1 technology to achieve perfect.

Related articles: