정보실

웹학교

정보실

javascript 웹 페이지에서 스크롤하는 방법

본문

폴드 아래의 내용을 보기 위해 페이지를 스크롤 하면 클릭 또는 키보드 이벤트보다 페이지에서 가장 일반적으로 발생하는 이벤트 일 수 있습니다.


사용자가 페이지를 스크롤 할 때마다 정보를 얻기 위해 window 객체에서 scroll 이벤트를 수신 할 수 있습니다.

window.addEventListener('scroll', event => {
  // scroll event detected
})


이벤트 핸들러 내에서 window.scrollY 및 window.scrollX를 사용하여 수평 스콜 링을 확인하여 현재 수직 스크롤 위치를 확인할 수 있습니다.

window.addEventListener('scroll', event => {
  console.log(window.scrollY)
  console.log(window.scrollX)
})

스크롤 이벤트는 한 번만 발생하지 않습니다.


스크롤의 끝이나 시작이 아니라 스크롤 하는 동안 여러 번 실행되므로 어떤 종류의 작업을 수행 해야 하는 경우 문제가 있습니다.


이벤트 핸들러에서 직접 계산이나 조작을 수행해서는 안되지만 대신 스로틀을 사용해야 합니다.


조절(Throttling) 


스크롤 이벤트는 이벤트 당 한 번만 발생하는 것이 아니라 작업이 진행되는 동안 이벤트 처리기 함수를 계속 호출합니다.


좌표를 제공하여 진행 상황을 추적 할 수 있기 때문입니다.


이벤트 처리기에서 복잡한 작업을 수행하면 성능에 영향을 미치고 사이트 사용자에게 느린 경험을 제공합니다.


Lodash처럼 조절 기능을 제공하는 라이브러리는 가능한 모든 사용 사례를 처리하기 위해 100 줄 이상의 코드로 구현합니다. 간단하고 이해하기 쉬운 구현은 setTimeout을 사용하여 100ms마다 스크롤 이벤트를 캐시합니다.

let cached = null
window.addEventListener('scroll', event => {
  if (!cached) {
    setTimeout(() => {
      //`cached`에서 원래 이벤트에 액세스 할 수 있습니다
      cached = null
    }, 100)
  }
  cached = event
})

조절(Throttling)은 마우스 이벤트 레슨에서 본 mousemove 이벤트에도 적용됩니다. 같은 일-마우스를 움직이면 해당 이벤트가 여러 번 발생합니다. 


https://codepen.io/flaviocopes/pen/BejPwV 


요소의 스크롤 위치를 얻는 방법 


브라우저에서 사용자 인터페이스를 구축 할 때 스크롤 할 수 있는 요소가 있을 수 있으며 현재 가로 및 세로 스크롤을 알아야 합니다.


어떻게?


요소가 있으면 scrollLeft 및 scrollTop 속성을 검사 할 수 있습니다.


0, 0 위치는 항상 왼쪽 상단에 있으므로 스크롤은 그와 관련이 있습니다.


예:

const container = document.querySelector('. container')
container.scrollTop
container.scrollLeft


이러한 속성은 읽기 / 쓰기이므로 스크롤 위치를 설정할 수도 있습니다.

const container = document.querySelector('. container')
container.scrollTop = 1000
container.scrollLeft = 1000


scrollLeft and scrollTop 




  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 30회 ]  작성일19-08-20 09:04

웹학교