# scroll

46개의 포스트
post-thumbnail

vue; router 변경 감지 + 스크롤 최상단

vue3, 뒤로가기를 해도 스크롤을 최상단으로 유지하자.

어제
·
0개의 댓글
post-thumbnail

[react] scroll event 탐지하여 header 안 보이게 하기

스크림도르 작업을 진행 중에 모바일 화면에서도 어느 정도는 사이트를 이용할 수 있게 해야한다는 생각이 들어서 반응형 작업을 진행하였다. 갈 수록 기존의 사이트들에 비해 무언가 부족하다는 생각을 했는데, 다른 유튜브, 트위터 등의 사이트를 보니 아래로 스크롤을 할 때에는

어제
·
0개의 댓글
post-thumbnail

[JS30] - 27) Click and Drag

사실 여기에서 $items.offsetLeft는 0으로 나오고, 이게 0이어도 기능 구현에는 아무런 문제가 없는데 왜 이걸 넣었는지??? 모르겠다. 다른 비슷한 기능을 구현하면서 알아봐야겠다. 더 공부해야하는 부분이다.드래그해 움직인 커서의 pageX좌표 - 처음 클릭

2021년 11월 7일
·
0개의 댓글

[scroll] IE window 10 Smooth scroll Option 이슈

스크롤 모션을 하면서 기존엔 position:sticky를 넣어 고정 시킨후 모션을 취하는 방식을 사용했었다.하지만 IE는 sticky를 지원하지 않았고 대안 방법으로 디폴트는 position:relative 나 absolute 를 사용하고 고정이 될때 fixed로 고

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

특정 섹션으로 스크롤 하기

네비게이션 바에 있는 각각의 영역을 클릭하면 해당하는 아래 영역으로 스크롤하고 싶다.예를 들어, skills를 클릭하면 아래의 skils 영역으로 스크롤해 이동해야 한다.단순히 지정한 길이만큼 스크롤 하지 않고, 정확하게 영역으로 스크롤 할 수 있는 방법이 있을까?해당

2021년 10월 20일
·
0개의 댓글

css scroll-snap을 쓰는 것보다 js 로 scroll 위치를 정하는 것이 마음 편하다.

css를 최대한 사용해 보고자 js를 사용하지 않고 html, css 만으로 프로필 사이트를 제작해 보았다.intro, skills, project, contact로 내용이 구분되었는데skills 부분을 화면 전체를 사용하고 싶지 않았다.그래도 skills로 scrol

2021년 10월 3일
·
0개의 댓글
post-thumbnail

mobile에서 화면 짤리는 현상

scroll-snap 을 사용하기 위해 위 코드처럼 body 에 overflow hidden 으로 하고 main에 scroll 을 줘서 sroll-snap 을 구현했다.그리고 나는 웹을 중심으로 만들었기 때문에모바일 화면에서는 배율을 줄여 사용할 수 있도록 했다.하지만

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

[JS] 특정 요소의 위치 중앙으로 스크롤하기 | scrollIntoView

초간단함scrollIntoView 함수를 쓰면 됨.내가 구현하려는건 상단의 버튼을 누르면토끼가 있는 위치로 슝 내려가는 것!원하는요소를 DOM으로 가져오고 함수를 적용해주면 끝!옵션으로 behavior, block을 설정할 수 있다.behavior: "smooth" :

2021년 9월 28일
·
0개의 댓글

[Flutter] ScrollController 사용해보기

이 글은 유튜브 강의와 블로그 자료를 보고 정리한 글입니다

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

Jquery mousewheel, scroll(학습 59일차 TIL)

Jquery mousewheel, scroll event

2021년 9월 6일
·
0개의 댓글

4. Deep Dive : Scroll

모달에 스크롤 넣기, 스크롤 디자인

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

May 13, 2021, TIL (Today I Learned) - TableView, URLSession, 이미지를 로딩해야하는데 유저가 스크롤을 빨리 넘길 때 생기는 문제

Step 1 : 다음의 조건을 만족하는 테이블뷰를 구현해봅시다섹션이 10개이며, 각 섹션의 줄 수는 섹션번호+2 개 (섹션번호는 0부터 시작)4번 섹션까지는 셀의 레이블에 (섹션번호, 줄번호)를 표기하고, 그 이후는 없음각 섹션의 3번 줄은 빨간색 배경을 가진 셀을 표

2021년 8월 26일
·
0개의 댓글
post-thumbnail

Interactive한 페이지를 나도 한번 만들어보자!

interactive한 페이지를 만들기 위해 스크롤에 연동되는 3가지 방법에 대해 구현을 해보고 어떤 방법이 가장 괜찮은지를 다룹니다.

2021년 8월 24일
·
0개의 댓글
post-thumbnail

Scroll시 헤더 변경

ex) 스크롤 전 ex) 스크롤 60px 후 ![](https://images.velog.io/images/kopu94/post/f4891f05-80d6-4e23-ab27-12c8647b0537/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1

2021년 8월 13일
·
0개의 댓글
post-thumbnail

safari, IE 에서 scroll-behavior 속성 사용 불가

scroll-behavior 속성 지원 범위 (MDN 참고)

2021년 8월 9일
·
0개의 댓글

scroll

sticky한 Nav를 scroll up-down 할 때 색상을 바꾸려고 한다.window에 addEventListener로 scroll 이벤트를 지정한다.top 변수에 스크롤 위치를 가져와서 스크롤 위치가 50보다 크면 class="active"를 nav의 class

2021년 8월 9일
·
0개의 댓글

vuetify 컨텐츠 영역에 scroll 적용하기 (스크롤이 생길 때만 Scroll Top 버튼 표시)

전체 페이지가 아닌 헤더 아래에 스크롤 생성영역에 스크롤이 생기면 ScrollTop(△) 버튼 표시전체 페이지가 아닌 헤더 아래에 스크롤 생성css 조정 필요!v-app 을 이용했을 경우 v-application--wrap min-height이 100vh로 잡혀있음.

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