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

채팅방 자동 스크롤 사용성 개선
개인노션 작성 글(2022.03.12) 블로그로 이전 중입니다.개선할 사용성은 이러합니다. 새로운 메세지가 오면 무조건 맨 아래로 자동 스크롤이 되는데 이러면사용자가 이전 채팅을 확인하거나 다른 작업을 할 때 상당히 불편합니다.그래서 스크롤의 위치가 맨 밑이 아니면 자
[jQuery] 이벤트들, index(), $(this) 정리
: mouseenter + mouseleave: 기본기능(default)이 있는 태그에 대해서 기능을 못하게 막는다.예를들어, a태그가 걸려있는 곳에 이벤트를 주면 a태그가 가장 우선순위에 있어서, 이벤트 명령이 작동하지 않는다. 따라서 기본기능을 작동하지 않도록 막는

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

React) TS - 이벤트 발생 시 element의 스크롤 상단으로 이동 시키기 (1)
2022-02-25테이블의 필터 & 페이지 이동을 했을 때, 데이터가 로딩이 되어도 Scroll이 최상단으로 이동이 되지 않는 이슈였습니다.단, 브라우저 크기가 작을 때만 나타나는 이슈...window에서 Scroll을 상단으로 이동시키는 방법은 다양했지만, 컴포넌트로
[React] Hide Header when scroll down (ft.throttle)
scroll을 아래로 내릴 때, header가 안보이게 되어야 한다. scroll을 위로 하면, header가 다시 보여야 한다. go down, go up에서 state true, false를 정해주어서 header의 표시를 정해주면 된다. https://w
scrolling with scroll-snap props
scroll-snap properties 페이지 스크롤에서 각 컨테이너별로 스크롤을 만든다. 스크롤 할때 컨텐츠 시작점에 자동으로 정렬됨.
메뉴 클릭시 특정 DOM 요소로 scroll 이동(여러개의 useRef 사용)
자식 컴포넌트에 있는 nav의 메뉴 클릭시 부모 컴포넌트에 있는 특정 DOM 요소로 scroll 이동

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

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

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

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

[react] scroll event 탐지하여 header 안 보이게 하기
스크림도르 작업을 진행 중에 모바일 화면에서도 어느 정도는 사이트를 이용할 수 있게 해야한다는 생각이 들어서 반응형 작업을 진행하였다. 갈 수록 기존의 사이트들에 비해 무언가 부족하다는 생각을 했는데, 다른 유튜브, 트위터 등의 사이트를 보니 아래로 스크롤을 할 때에는
.gif)
[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로 고