# scroll

83개의 포스트
post-thumbnail

[React] div 스크롤 맨 밑으로 내리기 / 스크롤 위치 조작하기

채팅창 UI를 만들어야하는데 리액트에서 어떻게 스크롤 위치를 조작할까? 리액트에서 DOM을 조작하여 스크롤을 맨 아래로 옮겨보자!

2022년 11월 18일
·
0개의 댓글
·

[Flutter] iOS의 scroll to top 기능은 어떻게 구현되어 있는가 (feat. 안될 때 확인해볼 것!)

안드로이드와 달리 ios에서는 화면 상단에 있는 status bar를 누르면 가장 위로 화면이 스크롤되는 기능이 있다.flutter에서는 특별하게 이 기능을 구현하지 않아도 ios에서는 적용이 되는데, 그 이유는 Scaffold에 해당 기능이 구현되어 있기 때문이다.

2022년 11월 12일
·
0개의 댓글
·

컴포넌트에 key를 할당해도 에러가 나는 문제

문제발생 ) > Warning: Each child in an array or iterator should have a unique “key” prop. react에서 다음과 같은 에러가 뜨면, key를 할당해 해결해 주면 된다. 하지만 key값을 할당해도 에러가 났

2022년 11월 7일
·
0개의 댓글
·
post-thumbnail

[Vue] 스크롤할때 따라다니는 메뉴 만들기

회사에서 스크롤할때 따라다니는 메뉴를 구현했었다. 구글링을 했었지만 자료가 부족하여 이번 블로그를 통해 개발했던 내용을 정리하고자 한다. vuetify v-scroll 맨처음에 이벤트리스너를 사용하여 스크롤 이벤트를 감지하도록 했었지만 vuetify에서 제공하는 S

2022년 10월 13일
·
0개의 댓글
·

[JS] 17 - 이벤트 처리 - scroll

스크롤바의 Y좌표 const scrollTop = window.scrollY;웹 브라우저의 창 높이 const windowHeight = window.screen.availHeight;HTML 문서의 높이 const documentHeight

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

스크롤에 반응하는 목차 하이라이트 만들기

사내에서 사용하는 시스템으로 마크다운 형식으로 문서를 작성하고 공유하는 서비스를 만들었다. 스터디 내용도 정리하고 개발관련 지식도 공유할수 있는 서비스이다.기존에 만들어진 마크다운은 <a/> 태그의 href 기능을 사용해 스크롤을 목차에 맞게 이동하는 기능만 들어

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

[CSS]배경이미지 고정

fixed스크롤바를 내려도 그림은 고정이 되고 글씨만 내려간다.scroll(기본값)\-스크롤바를 내리면 그림과 글씨가 같이 내려간다.

2022년 8월 25일
·
0개의 댓글
·
post-thumbnail

Scrollprogress(가로 스크롤) 만들기

scroll-bar는 어느 웹 사이트를 방문하더라도 쉽게 볼 수 있는 UI이다. 그런데 웹 사이트를 만들 때 스크롤이 레이아웃을 종종 망가뜨릴 때가 있었기에 이번에 Scrollprogress-bar를 만들어 보려 한다.트리 구조현재 viewpoint가 스크롤바의 몇 퍼

2022년 8월 25일
·
0개의 댓글
·
post-thumbnail

220822 JavaScript

scroll 스크롤바의 위치가 이동되는 이벤트(마우스휠이나 스크롤바의 스크롤을 누름에 따라) scrollTop() 스크롤바의 스크롤탑에서 부터의 위치, 스크롤바 위치 조정 scrollTop(수치) 두번째 상자의 위치에 걸치게 됨. offset().top() 요소가

2022년 8월 25일
·
0개의 댓글
·
post-thumbnail

Linear-gradient를 이용한 텍스트 스크롤 모션

그라디언트 효과를 활용해서 텍스트 효과를 소개하려고 한다!먼저 background 그라디언트의 퍼센티지를 조절하면 그라이데션 효과가 아닌 뚝 끈긴 단색 2개로 만들 수 있다.(테스트 해보시길...)위와같은 사이트에 텍스트 효과는 흔히 보았는데 여기에서는 트릭이 한가지

2022년 8월 20일
·
0개의 댓글
·
post-thumbnail

[CSS]배경이미지 고정

fixed스크롤바를 내려도 그림은 고정이 되고 글씨만 내려간다.scroll(기본값)\-스크롤바를 내리면 그림과 글씨가 같이 내려간다.

2022년 8월 16일
·
0개의 댓글
·

[React] 스크롤 작동으로 스타일 변경하기

scroll은 state를 객체 형태로 받는 게 편하다객체를 return하면 const {y} = useScroll(); 로 받는다.사실 스크롤이 안 생겨서 확인은 못 했다^^

2022년 8월 16일
·
0개의 댓글
·
post-thumbnail

javascript_Page scroll하는 3가지 방법(scrolling APIs)

오늘은 javascript로 간단하게 버튼을 누르면scroll을 제어하는 코드를 작성해보았다.엘리먼트 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect를 제공하는 메서드console을 찍어보면=> DOMRect {x: 30, y:81, width:102, h

2022년 8월 15일
·
0개의 댓글
·
post-thumbnail

Scroll To Item

CollectionView나 TableView에서 특정 요소로 스크롤 시키는 방법에 대해 알아본다.

2022년 8월 11일
·
0개의 댓글
·
post-thumbnail

[나만의 무기] 스크롤 삽질 기록

프로젝트 스크롤 삽질기..(infinite scroll)

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

HTML/CSS 스크롤바 숨기기 없애기

스크롤은 동작하되 스크롤 숨기기

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

[UX Engineering] Intersection Observer API

scroll 이벤트를 만들다가 발견한 것

2022년 8월 6일
·
0개의 댓글
·

[Web] 스크롤 시 한 번에 영역 이동하기

요즘 사이트를 돌아다니다보면 스크롤 한 번에 div가 통째로 슝~ 올라오는 기능을 구현한 사이트들을 심심찮게 볼 수 있었다.그래서 나도 이런 효과를 구현해보고 싶었고, 앞으로도 자주 쓸 일이 있을 것 같아서 기록해두기로 합니다! 제가 말하는 효과는 아래 페이지가 소개하

2022년 8월 1일
·
0개의 댓글
·

페이지 스크롤에 역행하기 또는 순행하기

이 이야기는 반응형 레이아웃 디자인을 위한 빌드임을 먼저 알리고 시작한다.

2022년 7월 10일
·
0개의 댓글
·
post-thumbnail

[FLUTTER] RangeSlider

Flutter의 기본 위젯인 RangeSlider에 대해서 알아보려고 한다.슬라이더 형식의 범위 선택기이며, 다양하게 커스텀하여 사용할 수 있다.기본적인 사용법은 values 파라미터에 RangeValues(min, max)값과 onChanged 함수를 필수 값으로 작

2022년 7월 9일
·
0개의 댓글
·