# scroll

15개의 포스트

react - 스크롤

react에서 스크롤 정보를 가져올 때 어떻게 하는지 찾아보았다.나중에 분명 생각이 안 날 거기 때문에 정리해보자 componentDidMount() { window.addEventListener('scroll', this.handleScroll); } ha

5일 전
·
0개의 댓글
post-thumbnail

TIL 48 | 좌표구하기 1. Window sizes and scrolling

sticky 헤더를 자바스크립트로 구현해보기 위하여 현재 스크롤 상태 값을 가져오는 연습을 하고 있다. 이 과정에서 접하게된 브라우저 창의 너비/높이를 표현하는 방식과 스크롤을 제어하는 방법을 정리해두려 한다. Width/height of the window win

2021년 4월 7일
·
0개의 댓글
post-thumbnail

TIL 009 JavaScript_Scrolling

scrollWidth와 scrooHeight 속성은 clientWidth, clientHeight와 유사하지만, 스크롤바에 의해 감춰져 있는 숨겨진 영역도 포함한다는 점이 다르다.수평 스크롤바가 없기 때문에 scrollWidth = clientWidth수직 스크롤바가

2021년 3월 8일
·
2개의 댓글
post-thumbnail

HTML/CSS 자기소개 페이지 구현

✅ Wecode 1주차 사전스터디 HTML/CSS로 자기소개 페이지 구현하기✅ 스크롤 고정 Navigation bar 효과주기✅ Navigation bar 메뉴 hover시 색상이 바뀌게 효과주기처음 레이아웃을 구현을 잘 정해놔야 CSS가 깔끔해진다는 글을 보고 최대한

2021년 1월 15일
·
0개의 댓글

body scroll lock/unlock

모달 창 띄웠을 때 바닥 페이지 스크롤 안되게 해주세요.프로젝트를 하다 보면 위와 같은 요청을 받게 된다.레이어로 모달 창을 띄운 상태에서 스크롤을 하면 바닥 페이지가 위 아래로 움직이게 되는데이걸 막아 달라는거다.CSS 프레임워크나 모달 플러그인 등을 사용하면자체적인

2021년 1월 14일
·
0개의 댓글

스크롤에 반응하는 sticky header 만들기

내비게이션 메뉴에 대한 접근성을 높이기 위해스크롤에 상관없이 header를 항상 화면 상단에 고정시키는 sticky header를 많이들 사용한다.페이지 어디서든 header 메뉴에 접근할 수 있지만 항상 header 높이 만큼 컨텐츠를 가리게 된다.스크롤에 반응하는

2021년 1월 14일
·
0개의 댓글
post-thumbnail

Intersection Observer API

비동기적인 요소의 인터섹션을 감지한다. 현재 스크롤 하면서 화면에 보여지는 요소 찾기 인피니티 스크롤만들기 이미지/ 데이터 프리패칭 하기 좋은 api라고 생각 예제

2021년 1월 9일
·
0개의 댓글
post-thumbnail

13. Slide in on Scroll

프로젝트 소개 일정 수준 이상의 스크롤을 하게되면, 이미지가 슬라이드 식으로 나타나고 사라지는 효과 구현(class name 추가 방식) 코드 작성 순서 제어 대상(이미지)를 특정 슬라이드 함수 코드 작성 (스크롤 위치 등을 고려해서, 조건 문 작성) 배운 것들 d

2020년 12월 15일
·
0개의 댓글
post-thumbnail

React) Parallax Scrolling Effect : 스크롤시 속도를 서로 다르게 조절

: '시차'라는 뜻의 천문학적 용어. 스크롤시 보여지는 컨텐츠의 속도를 서로 다르게 조절해줌으로써 입체적인 느낌을 줄 수 있다.<설치>npm i --save react-rellax프로젝트중 parallax scrolling effect가 필요해서 알아보다가 rea

2020년 8월 9일
·
0개의 댓글
post-thumbnail

project-Aesop) ScrollY , React Hook

\* Scroll Event : React에서 scroll event를 주기 위해 y의 타겟지점을 알기 위해 메인페이지에서 scroll event fade-in을 해주기 위해서 각 피드마다의 y타겟지점을 알아내서 그 지점이 지났을 때 각각의 state값이 변하게 해주었

2020년 7월 23일
·
0개의 댓글

🎨 스크롤 도오전!

Building a Cool Horizontal Scroll Interation in React (https://medium.com/dailyjs/horizontal-scroll-animation-fc39ae43cbe5)

2020년 7월 14일
·
0개의 댓글

(TIL 32일차) 스타일쉐어 1차 프로젝트 OOTD (5)

스타일쉐어 scroll 원하는 위치로 이동하기

2020년 2월 29일
·
0개의 댓글

jQuery-slimScroll 사용하기

jQuery-slimScroll은 div 내에서 iframe처럼 내부 스크롤을 제공하는 jQuery 라이브러리이다. slimscroll.PNG npm 설치 js 추가 관련 링크 http://rocha.la/jQuery-slimScroll https://github.com/rochal/jQuery-slimScroll

2019년 9월 23일
·
0개의 댓글

Scroll Stop 이벤트 확장 함수

window 네이티브 이벤트에는 scroll stop 이벤트가 없다. 아래와 같은 코드를 추가하면 scrollStopped 확장이벤트를 사용할 수 있다.

2019년 8월 13일
·
0개의 댓글