[javascript] scroll event(등록, 삭제)

Web을 이용하는 중에 scroll을 내리다보면 데이터가 발생하는 경우가 종종 생긴다.

 

javascript 'scroll'을 통해 event를 실행할 수 있다.

 

1. 첫번째 방법 : target.addEventListener에 scroll을 등록해 준다.

let last_known_scroll_position = 0;
let ticking = false;

function doSomething(scroll_pos) {
  // scroll 위치에 대한 작업을 하세요
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });

    ticking = true;
  }
});

2. 두번째 방법 : target.onscroll = function 을 등록해준다.

const textarea = document.querySelector('textarea');
const log = document.getElementById('log');

textarea.onscroll = logScroll;

function logScroll(e) {
  log.textContent = `Scroll position: ${e.target.scrollTop}`;
}

 

3. 이벤트를 제거하는 방법 :  removeEventListener 사용, onscroll 에 null 주입.

 

window.removeEventListener('scroll', someFunction);

target.onscroll = null

 

+ scroll값에 따라 target을 이동시켜 주고 싶다면. target.scrollTo(x,y) 를 사용하면 된다.

매개변수

• x-좌표는 문서의 왼쪽상단부터 시작하는 픽셀단위의 가로축입니다.
• y-좌표는 문서의 왼쪽상단부터 시작하는 픽셀단위의 세로축입니다.

 

+ scroll event가 실행되지 않을 경우.

1. scroll이 생겨야 event가 실행되기 때문에 html요소에 overflow 에 hidden값이 있다면 event는 발생되지 않는다.

2. 스크롤은 화면보다 컨텐츠 요소가 클 경우 발생되기 때문에 높이 자체를 100%나 100vh 로 지정할 경우에도 스크롤 이벤트가 작동되지 않는다.

출처 : https://developer.mozilla.org/ko/docs/Web/API/Window/scrollTo

Window.scrollTo() - Web API | MDN