[Javascript & jQuery] 스크롤이 요소 끝에 닿을 경우 계산 (가로, 세로)

자바스크립트 (JavaScript)

See the Pen 스크롤이 요소 끝에 닿을 경우 계산 (가로, 세로) by kimyangsun (@kimyangsun) on CodePen.

 

스크롤이 요소 끝에 닿을 경우 계산 (가로, 세로) 코드펜 소스코드 예제입니다.

각각 박스별로 콘솔로 상태값을 확인할 수 있도록 console.log를 찍어뒀으니 콘솔창을 보며 확인하시면 됩니다. :)

 

let container = $('.container');
let HorizontaContainer = $('.container-hr');

container.on('scroll', function(){
  let scrollTop = $(this).scrollTop();
  let innerHeight = $(this).innerHeight();
  let totalHeight = $(this).prop('scrollHeight');
  console.log(`↓ 세로 스크롤 탑 : ${scrollTop}`);
  console.log(`↓ 세로 요소 높이 : ${innerHeight}`);
  console.log(`↓ 세로 요소 포함 전체높이 : ${totalHeight}`);
  if (scrollTop + innerHeight >= totalHeight) {
    container.addClass("end");
  } else {
    container.removeClass("end");
  }
});

HorizontaContainer.on('scroll', function(){
  let scrollLeft = $(this).scrollLeft();
  let innerWidth = $(this).innerWidth();
  let totalWidth = $(this).prop('scrollWidth');
  console.log(`→ 가로 스크롤 레프트 : ${scrollLeft}`);
  console.log(`→ 가로 요소 너비 : ${innerWidth}`);
  console.log(`→ 가로 요소 포함 전체너비 : ${totalWidth}`);
  if (scrollLeft + innerWidth >= totalWidth) {
    HorizontaContainer.addClass("end");
  } else {
    HorizontaContainer.removeClass("end");
  }
});

container.niceScroll({
  cursorcolor: "#328adb",
  cursorwidth: "5px", 
  cursorborder: "none",
  cursorborderradius: "5px",
  autohidemode: false,
  railpadding: {top: 0, right: 3, left: 3, bottom: 0},
  scrollspeed: 200,
});

HorizontaContainer.niceScroll({
  cursorcolor: "#ff3300",
  cursorwidth: "5px", 
  cursorborder: "none",
  cursorborderradius: "5px",
  autohidemode: false,
  railpadding: {top: 3, right: 0, left: 0, bottom: 3},
  scrollspeed: 200,
});