페이지 스크롤이 끝났는지 보는 방법 updated_at: 2024-12-14 16:26

페이지 스크롤이 끝났는지 보는 방법(onscrollend)

window.onscroll = function() {   
  var scroll = getPageScroll(); // function from lightbox.js   
  var size = getPageSize(); // function from lightbox.js   
  if((size[3] + scroll[1])/size[1] == 1) {   
    alert('page scroll done');   
  }   
}  


//   
// getPageScroll()   
// Returns array with x,y page scroll values.   
// Core code from - quirksmode.com   
//   
function getPageScroll(){   
  var xScroll, yScroll;   

  if (self.pageYOffset) {   
    yScroll = self.pageYOffset;   
    xScroll = self.pageXOffset;   
  } else if (document.documentElement && document.documentElement.scrollTop){  // Explorer 6 Strict   
    yScroll = document.documentElement.scrollTop;   
    xScroll = document.documentElement.scrollLeft;   
  } else if (document.body) {// all other Explorers   
    yScroll = document.body.scrollTop;   
    xScroll = document.body.scrollLeft;    
  }   

  arrayPageScroll = new Array(xScroll,yScroll)    
  return arrayPageScroll;   
}   

// -----------------------------------------------------------------------------------   

//   
// getPageSize()   
// Returns array with page width, height and window width, height   
// Core code from - quirksmode.com   
// Edit for Firefox by pHaez   
//   
function getPageSize(){   

  var xScroll, yScroll;   

  if (window.innerHeight && window.scrollMaxY) {     
    xScroll = window.innerWidth + window.scrollMaxX;   
    yScroll = window.innerHeight + window.scrollMaxY;   
  } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac   
    xScroll = document.body.scrollWidth;   
    yScroll = document.body.scrollHeight;   
  } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari   
    xScroll = document.body.offsetWidth;   
    yScroll = document.body.offsetHeight;   
  }   

  var windowWidth, windowHeight;   

  //  console.log(self.innerWidth);   
  //  console.log(document.documentElement.clientWidth);   

  if (self.innerHeight) { // all except Explorer   
    if(document.documentElement.clientWidth){   
      windowWidth = document.documentElement.clientWidth;    
    } else {   
      windowWidth = self.innerWidth;   
    }   
    windowHeight = self.innerHeight;   
  } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode   
    windowWidth = document.documentElement.clientWidth;   
    windowHeight = document.documentElement.clientHeight;   
  } else if (document.body) { // other Explorers   
    windowWidth = document.body.clientWidth;   
    windowHeight = document.body.clientHeight;   
  }      

  // for small pages with total height less then height of the viewport   
  if(yScroll < windowHeight){   
   pageHeight = windowHeight;   
  } else {    
    pageHeight = yScroll;   
  }   

  //  console.log("xScroll " + xScroll)   
  //  console.log("windowWidth " + windowWidth)   

  // for small pages with total width less then width of the viewport   
  if(xScroll < windowWidth){      
    pageWidth = xScroll;           
  } else {   
    pageWidth = windowWidth;   
  }   
  //  console.log("pageWidth " + pageWidth)   

  arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)    
  return arrayPageSize;   
}  
평점을 남겨주세요
평점 : 5.0
총 투표수 : 1

질문 및 답글