# scroll
[react] scroll event 탐지하여 header 안 보이게 하기
스크림도르 작업을 진행 중에 모바일 화면에서도 어느 정도는 사이트를 이용할 수 있게 해야한다는 생각이 들어서 반응형 작업을 진행하였다. 갈 수록 기존의 사이트들에 비해 무언가 부족하다는 생각을 했는데, 다른 유튜브, 트위터 등의 사이트를 보니 아래로 스크롤을 할 때에는
.gif?w=768)
[JS30] - 27) Click and Drag
사실 여기에서 $items.offsetLeft는 0으로 나오고, 이게 0이어도 기능 구현에는 아무런 문제가 없는데 왜 이걸 넣었는지??? 모르겠다. 다른 비슷한 기능을 구현하면서 알아봐야겠다. 더 공부해야하는 부분이다.드래그해 움직인 커서의 pageX좌표 - 처음 클릭
[scroll] IE window 10 Smooth scroll Option 이슈
스크롤 모션을 하면서 기존엔 position:sticky를 넣어 고정 시킨후 모션을 취하는 방식을 사용했었다.하지만 IE는 sticky를 지원하지 않았고 대안 방법으로 디폴트는 position:relative 나 absolute 를 사용하고 고정이 될때 fixed로 고
211020 TIL 자바스크립트 스크롤의 방향에 따라 숨겨지고 보여지는 효과(학습 88일차)
window.pageYOffset, .contains()
특정 섹션으로 스크롤 하기
네비게이션 바에 있는 각각의 영역을 클릭하면 해당하는 아래 영역으로 스크롤하고 싶다.예를 들어, skills를 클릭하면 아래의 skils 영역으로 스크롤해 이동해야 한다.단순히 지정한 길이만큼 스크롤 하지 않고, 정확하게 영역으로 스크롤 할 수 있는 방법이 있을까?해당
css scroll-snap을 쓰는 것보다 js 로 scroll 위치를 정하는 것이 마음 편하다.
css를 최대한 사용해 보고자 js를 사용하지 않고 html, css 만으로 프로필 사이트를 제작해 보았다.intro, skills, project, contact로 내용이 구분되었는데skills 부분을 화면 전체를 사용하고 싶지 않았다.그래도 skills로 scrol
mobile에서 화면 짤리는 현상
scroll-snap 을 사용하기 위해 위 코드처럼 body 에 overflow hidden 으로 하고 main에 scroll 을 줘서 sroll-snap 을 구현했다.그리고 나는 웹을 중심으로 만들었기 때문에모바일 화면에서는 배율을 줄여 사용할 수 있도록 했다.하지만
[JS] 특정 요소의 위치 중앙으로 스크롤하기 | scrollIntoView
초간단함scrollIntoView 함수를 쓰면 됨.내가 구현하려는건 상단의 버튼을 누르면토끼가 있는 위치로 슝 내려가는 것!원하는요소를 DOM으로 가져오고 함수를 적용해주면 끝!옵션으로 behavior, block을 설정할 수 있다.behavior: "smooth" :
May 13, 2021, TIL (Today I Learned) - TableView, URLSession, 이미지를 로딩해야하는데 유저가 스크롤을 빨리 넘길 때 생기는 문제
Step 1 : 다음의 조건을 만족하는 테이블뷰를 구현해봅시다섹션이 10개이며, 각 섹션의 줄 수는 섹션번호+2 개 (섹션번호는 0부터 시작)4번 섹션까지는 셀의 레이블에 (섹션번호, 줄번호)를 표기하고, 그 이후는 없음각 섹션의 3번 줄은 빨간색 배경을 가진 셀을 표
Interactive한 페이지를 나도 한번 만들어보자!
interactive한 페이지를 만들기 위해 스크롤에 연동되는 3가지 방법에 대해 구현을 해보고 어떤 방법이 가장 괜찮은지를 다룹니다.
Scroll시 헤더 변경
ex) 스크롤 전 ex) 스크롤 60px 후 
scroll
sticky한 Nav를 scroll up-down 할 때 색상을 바꾸려고 한다.window에 addEventListener로 scroll 이벤트를 지정한다.top 변수에 스크롤 위치를 가져와서 스크롤 위치가 50보다 크면 class="active"를 nav의 class
vuetify 컨텐츠 영역에 scroll 적용하기 (스크롤이 생길 때만 Scroll Top 버튼 표시)
전체 페이지가 아닌 헤더 아래에 스크롤 생성영역에 스크롤이 생기면 ScrollTop(△) 버튼 표시전체 페이지가 아닌 헤더 아래에 스크롤 생성css 조정 필요!v-app 을 이용했을 경우 v-application--wrap min-height이 100vh로 잡혀있음.