# ScrollIntoView

12개의 포스트
post-thumbnail

[React][Javascript] | 특정 Element로 웹페이지 자동 스크롤 기능 구현

어떤 버튼이나 링크를 클릭한 경우, 동일 페이지 내에서 또는 다른 페이지의 특정 요소로 스크롤이 되는 기능을 구현한다.나의 경우 다음과 같은 방식으로 기능을 구현했다boolean 값을 갖는 state 생성버튼 클릭 시, state 값 변경 및 특정 페이지로 Naviga

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

채팅방 자동 스크롤 사용성 개선

개인노션 작성 글(2022.03.12) 블로그로 이전 중입니다.개선할 사용성은 이러합니다. 새로운 메세지가 오면 무조건 맨 아래로 자동 스크롤이 되는데 이러면사용자가 이전 채팅을 확인하거나 다른 작업을 할 때 상당히 불편합니다.그래서 스크롤의 위치가 맨 밑이 아니면 자

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

React) TS - 이벤트 발생 시 element의 스크롤 상단으로 이동 시키기 (2)

2022-02-25페이지에서 검색을 했을 때, 이전 이슈와 같이 컴포넌트의 Scroll이 상단으로 이동되지 않는다는 이슈를 수정해보려고 합니다.이전 이슈와 다른 점은 해당 테이블을 가져와 사용하고 있는 부모 컴포넌트에서 Scroll 테이블이 있는 자식 컴포넌트로 이벤트

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

React) TS - 이벤트 발생 시 element의 스크롤 상단으로 이동 시키기 (1)

2022-02-25테이블의 필터 & 페이지 이동을 했을 때, 데이터가 로딩이 되어도 Scroll이 최상단으로 이동이 되지 않는 이슈였습니다.단, 브라우저 크기가 작을 때만 나타나는 이슈...window에서 Scroll을 상단으로 이동시키는 방법은 다양했지만, 컴포넌트로

2022년 2월 25일
·
0개의 댓글

scroll snap + scrollIntoView() 스크롤 하단으로 이동하는 현상 해결안

scroll snap 을 이용해서 슬라이더를 그려보았다. 스크롤 할때마다 페이지 최하단으로 이동하는 문제가 나왓다. 결론 : .scrollIntoView({ behavior: "smooth", block: "nearest", inline: "

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

scrollIntoView 를 이용하여 스크롤 하기

🎁scrollIntoView >##### useEffect, scrollIntoView, getElementById 를 이용하여 Title 컴포넌트에 'freeboard'라는 id값을 줘서 해당 페이지에 들어오면 Title 컴포넌트를 제일 상단에 보여주게 한다.

2021년 12월 28일
·
0개의 댓글
post-thumbnail

[JS]scrollIntoView event handlers, bubbling & capturing, event delegation, DOM traversing

Implementing Smooth Scrolling scroll 관련 알아두면 좋은 정보들 > * getBoundingClientRect() : relative to visible viewport window.screen : 모니터 size window.outer

2021년 12월 22일
·
0개의 댓글
post-thumbnail

특정 섹션으로 스크롤 하기

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

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

자동 스크롤링 버튼 만들기 | JS Snippets

버튼을 누르면 해당 섹션으로 부드럽게 스크롤링 되는 기능은 제품과 서비스를 소개하는 한 장짜리 랜딩 페이지에서 자주 볼 수 있다. 타겟 요소까지 스크롤이 되는 것은 다음과 같이 정의할 수 있다. 타겟 요소 영역의 최상단이 뷰포트의 상단과 일치하는 것

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

21.06.10

scrollIntoView MDN Element 인터페이스의 scrollIntoView() 메소드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다. element를 선택하고 scrollIntoView 메소드

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

element.scrollIntoView

요즘 웹사이트에서 찾아보면 하나의 페이지만 있고, 상단의 네비게이션 바를 통해 화면을 이동하는 방식을 볼 수 있다. 이러한 페이지는 어떻게 구현하는 것일까? 물론 스크롤을 하나하나 계산해서 이동시킬 수도 있겠지만, element의 메소드인 scrollIntoView를

2021년 2월 22일
·
2개의 댓글