# scroll

60개의 포스트

next.js 스크롤 복원 막기

이슈🐞 구현 중 페이지에서 모달 컴포넌트 닫기 버튼 클릭시 모달이 닫히면서 스크롤이 상단으로 올라가버리는 버그 발생. 항상 발생하는것이 아닌 간헐적으로 발생함. 주로 처음 사이트 접속 후 실행하면 발생하며, 이후 잘 발생안함. try1 window.histor

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

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

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

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

[jQuery] 이벤트들, index(), $(this) 정리

: mouseenter + mouseleave: 기본기능(default)이 있는 태그에 대해서 기능을 못하게 막는다.예를들어, a태그가 걸려있는 곳에 이벤트를 주면 a태그가 가장 우선순위에 있어서, 이벤트 명령이 작동하지 않는다. 따라서 기본기능을 작동하지 않도록 막는

2022년 4월 12일
·
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개의 댓글

[React] Hide Header when scroll down (ft.throttle)

scroll을 아래로 내릴 때, header가 안보이게 되어야 한다. scroll을 위로 하면, header가 다시 보여야 한다. go down, go up에서 state true, false를 정해주어서 header의 표시를 정해주면 된다. https://w

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

scrolling with scroll-snap props

scroll-snap properties 페이지 스크롤에서 각 컨테이너별로 스크롤을 만든다. 스크롤 할때 컨텐츠 시작점에 자동으로 정렬됨.

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

메뉴 클릭시 특정 DOM 요소로 scroll 이동(여러개의 useRef 사용)

자식 컴포넌트에 있는 nav의 메뉴 클릭시 부모 컴포넌트에 있는 특정 DOM 요소로 scroll 이동

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

scroll event_JavaScript

window.scrollYwindow.scrollY + window.innerHeightwindow.innerHeightscrollY와 pageYoffset은 같은 속성이다.오래된 브라우저의 경우 scrollY(IE9미만)를 지원하지 않을 수도 있어서 pageYoffs

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

메뉴 클릭시 특정 DOM 요소로 scroll 이동

자식 컴포넌트에 있는 nav의 메뉴 클릭시 부모 컴포넌트에 있는 특정 DOM 요소로 scroll 이동처음에는 자식 컴포넌트에서 useRef를 사용하려 했으나 스택오버플로우에 질문도 하고 구글링을 몇시간 한 결과 useEffect, React.createRef를 사용하려

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

css 전체 스크롤을 부드럽게 적용하기

scroll-behavior 항목에 smooth를 넣어주면전체 스크롤이동 화면이 부드럽게 이어진다.예시>

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

1.15~16- React masterClass (Framer motion1)

Farmer motion을 사용해서 여러가지 애니메이션 동작을 공부해볼 것이다.사용법은 먼전 npm i framer-motion으로 설치해주고 import를 해준 후import { motion } from "framer-motion";모든 HTML tag들을 <d

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

Javascript 스크롤 이벤트

web에서 발생하는 스크롤 이벤트를 이용해 다루는 방법을 써보았습니다.

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

React에서 페이지 이동시 스크롤 제일 위로 올리는 방법

프로젝트 중 페이지 이동시 이전 페이지의 스크롤 위치 그대로 이동되는 것을 발견했다. 이를 해결하기 위해 페이지 이동시마다 스크롤 위치를 제일 위로 올리는 방법을 찾아봤다.먼저 공식문서의 방법이다. https://v5.reactrouter.com/web/gui

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

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

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

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

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

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

2021년 12월 2일
·
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개의 댓글