# scroll event

yunsungyang-omc

인피니티 스크롤 구현하기 1편 : 무한 스크롤 기능은 무엇이고 어떻게 구현할 수 있을까에 대해서 알아보자.

originxh

자바스크립트로 채팅기능을 구현중에 스크롤을 올리면 일정 높이에 다다르면 이전 채팅기록을 불러오게 만들었습니다.그런데 이벤트가 너무 많이 발생해서 lodash에 throttle을 사용하려 합니다. 쓰로틀(throttle)이란 연속되는 이벤트의 과부화를 막기 위해 일정시

0hyo

DOM의 스크롤 이벤트로 ‘현재 스크롤 한 길이’와 ‘전체 페이지 길이’를 비교해서 추가적인 요소를 불러오는 방법타겟 요소를 정해서 그 요소가 화면에 보이게 되면 추가적인 요소를 불러오는 방법Scroll Event는 전체적인 스크롤에 반응한다. 이는 성능적으로 비효율적

hoje15v

event handler에 event 이외의 추가 인자를 넣어야하는 상황 해결하기 + Refactoring 꿀팁(흔한 로직)반복적인 코드를 함수로 만든다.반복되지 않는 부분을 인자로 받는다. ex) opacitybut! eventHandler 함수는 e 만을 인자로 받

nala723

개인적인 사이드 프로젝트를 준비중인데, 스크롤을 이용한 이벤트들을 구현 예정이다.그 중의 한가지는 스크롤을 내림에 따라 원형이 나타나며 점점 화면을 가득 채우는 사이즈로 커지고, 다음 컨텐츠가 그 화면을 배경으로 자연스럽게 나타나는 효과이다.(넘 멋진 애플의 아이폰 s

dasssseul

오늘은 무한 스크롤 UI를 구현하는 방법에 대해 배웠다. 어려울 것 같다고 생각했는데 바닐라 JS를 반복해서 쓰니 훨씬 빠르고 쉽게 이해할 수 있었다...이게 다 3주간의 고생이 있었기 때문에 가능하다고 생각한다. 프로그래머스 KDT 최고 ><scroll even

yisu-kim

Intersection Observer API는 target element와 ancestor element 또는 top-level document's viewport 사이 교차지점(intersection)의 변화를 비동기적으로 관찰(observe)하는 기능을 제공한다.

kyungjune

진행하고 있는 빵덕 프로젝트의 테마상세 페이지에서 스크롤시 네비게이션바의 색이 변환하는 디자인이 나왔다. 스크롤 위치를 어떻게확인할까 고민을 하다가 IntersectionObserver를 사용하기로 하였다.1.eEffect안에 IntersectionObserver로 r

taeung

Scroll Event를 Custom Hook으로 빼보는 방법에 대해 공부해보도록 하겠습니다. 일반적인 Scroll Event 일반적으로 Scroll Event를 감지하기 위해서는 addEventListener('scroll')을 이용하면 됩니다. 앞에 스크롤 이벤

chyoon0512

대표적으로 애플사이트에서 scroll값을 이용해 다양한 효과를 연출하는 것을 볼 수 있다. ( 멋지다, 이쁘다..) scroll값으로 opacity 값 비율 0~1 까지의 범위를 구하는 법을 알아보도록 하겠습니다.만약 위와 같이 4개의 섹션이 존재하고, section

jenny87879

React에서 간단한 Scroll event 사용하기

hyounglee

햄버거 버튼을 눌렀을때 사이드에서 네비게이션 모달이 나오는 페이지의 형태는 쉽게 찾아볼 수 있다. 이때 사용성을 위해서 모달창은 스크롤이 가능하지만(화면보다 네비게이션의 높이가 긴 경우), 그 외에 dimmed 영역은 스크롤이나 터치 이벤트가 불가능하게 하는 것이 좋다