# scroll

65개의 포스트
post-thumbnail

puppeteer를 활용하여 크롤링 해보기 (4)

자동으로 스크롤을 내려줄 때 발생한 문제점, 브라우저의 해상도를 넓게 쓰는 법

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

AOS 대응 | webview scroll memo - 웹뷰 스크롤 기억 못함 이슈

AOS 웹뷰에서 뒤로가기를 했을 경우, 웹 페이지 스크롤이 맨 위로 올라가면서 전체적으로 refresh 되었다. 이 때문에 스크롤이 기억되지 못하는 문제가 발생했다.webview 에서 사용하는 App 의 정보들을 불러오는 getAppinfo 인터페이스 함수가 호출되면서

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

[ React ] Infinite Scroll 구현하고 발생한 문제

React Hook인 와 를 사용해 Infinite Scroll을 구현했다. Infinite Scroll 기능을 구현하기 전에는 Cursor-based Pagination으로 서비스를 제공했는데 자세한 내용은 다음 링크를 참고하면 된다. > Cursor-based

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

fullpage 구현하기(with css)

스크롤을 내렸을 때 다음 화면 또는 이전 화면으로 바로 전환되는 기능을 구현했다.처음에는 fullpage 라이브러리를 사용하여 구현했었는데 ver.3부터는 유로여서 라이선스 에러가...😭이 에러를 어떻게 잡을까... 이 방법 저 방법 다 써봤지만 사라지지않아!!

2022년 5월 29일
·
4개의 댓글

[JS] 새로고침 시 스크롤 위치 기억

브라우저 새로고침 시 스크롤이 최상단으로 이동되는 현상이 있다.상황에 따라 다르겠지만 여간 번거로운게 아니다..window history객체의 scrollRestoration속성을 사용하여 스크롤위치를 컨트롤 할 수 있다.끝.

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

next.js 스크롤 복원 막기

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

2022년 5월 15일
·
0개의 댓글

페이지 이동시 스크롤 최상위

routes/index.js

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

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

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

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

[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개의 댓글