TIL 7/18

학습내용

오늘은 JavaScript 에서 스크롤 위치를 찾는 Web API를 찾아서 적용해봤다. 스크롤에 따른 효과를 찾으려면 현재의 스크롤이 어느정도인지 알아야 한다.
mdn의 window.scrollY Api로 스크롤의 현재위치를 Y축으로 알 수 있다.
scrollY mdn

document.addEventListener('scroll', () => {
  console.log('현재 스크롤 :', window.scrollY);
})

스크롤이 존재하는 페이지에서 개발자 도구로 콘솔에 위코드를 입력하고 스크롤을 움직여보면 현재의 스크롤에 스크롤된 값이 출력되는 것을 볼 수 있다.
처음 들어간 페이지에서 스크롤을 아래로 내려가기 시작하면 스크롤 값이 커진다. 그래서 일정 스크롤 이상을 움직이게 되었을때 효과를 주고 싶다면 그 자신이 원하는 스크롤 값을 지정할 수 있다.
어떠한 엘리먼트가 위치한 곳의 스크롤 값을 알고 싶다면 특정 엘리먼트의 높이를 알 수 있다면 그 위치까지 스크롤을 비교해서 효과를 적용할 수 있다.
offsetHeight mdn

const element = document.querySelector('선택자');
const eleheight = element.offsetHeight;
console.log(eleheight);

웹사이트에서 선택자 하나를 정해서 querySelector('') 안에 넣어서 코드를 콘솔에 넣어보면 선택자의 높이를 알 수 있다.

element.offsetHeight === element.getBoundingClientRect().height

이 둘은 같은 값을 나타낸다. getBoundingClientRect()를 이용하면 뒤에 .dot 뒤에 여러 옵션으로 값을 찾아볼 수 있다.

느낀점

WebApi에 정말 많은 기능이 있는 것을 몰랐다. 이제 겨우 몇개 알기 시작했다. 여러가지 api도 활용해 보면서 더 많은 기능들을 써보고 적절한 것을 활용할 수 있게 더 찾아보고 연습해야겠다.