목록이벤트 (2)

umilove98의 블로그

window.scrollY 화면의 스크롤 위치를 이용하여 이벤트 처리하기

화면이 스크롤되어 일정 위치에 도달하면 요소를 보이지 않게 하고 싶다. window.scrollY 속성을 이용하면 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환해준다. window.addEventListener( 'scroll', _.throttle(function () { console.log(window.scrollY); if (window.scrollY > 500) { // 배지 숨기기 badgeEl.style.display = 'none'; } else { // 배지 보이기 badgeEl.style.display = 'block'; } }, 300) ); lodash.js를 사용하였다. 화면을 스크롤하면 300ms 간격으로 문서가 수직으로 스크롤 된 크기를 콘솔에 출력하고 500px 넘게 ..
language,framework,library/Javascript 2022. 10. 13. 00:02
lodash.js 이벤트 발생 시 함수 실행 빈도를 조절해보자

화면 스크롤 시 이벤트를 발생시켜 콘솔에 출력하는 코드를 작성해 보았다. window.addEventListener('scroll', function () { console.log('scroll!'); }); 브라우저 창을 스크롤 할 경우 이벤트가 발생하여 콘솔에 scroll! 이라고 출력하는 코드이다. 아주 잠깐 스크롤을 움직였을 뿐인데 굉장히 많은 콜백함수 호출이 일어났다. 이런 간단한 기능 하나라면 상관없겠지만 기능이 많아지고 복잡해지면 이런 잦은 콜백함수 호출로 인해 사이트의 반응이 느려질 수 있다. 이를 해결하기 위해 lodash.js 라이브러리를 사용할 수 있다. lodash.js - Libraries - cdnjs - The #1 free and open source CDN built to ..
language,framework,library/Javascript 2022. 10. 12. 23:54
이전 Prev 1 Next 다음