Comments (3)
ref를 적용하고, 스크롤이 위치한 곳의 DOM 요소를 넣어둔 후에 scrollTop을 scrollHeight로 설정함으로써 구현 완료
from ssocotimer.
기존 로직의 경우 lap이 추가됨과 동시에 scroll을 아래로 내려줬기 때문에 추가 이전에 스크롤의 위치를 계산해서 새로운 요소가 안보이는 문제가 발생했습니다.
그래서 해당 로직을 담은 부분을 별도의 downScroll 함수로 빼고, useEffect를 이용해서 lap이 변화가 되어서 리렌더링이 된 이후에 scroll 계산을 하는 방식으로 교체하여 문제를 해결했습니다.
from ssocotimer.
새로운 요소가 추가될 때만 해당 useEffect가 작동하기 때문에, 다른 탭(스톱워치, 타이머, 시계)로 이동했다가 돌아오는 경우 맨 위 요소가 보이게 됩니다.
from ssocotimer.
Related Issues (20)
- enhancement: 로컬스토리지에 다크모드 상태값 저장 HOT 1
- enhancement: 페이지 라우팅 추가 HOT 1
- deployment: CI/CD 적용하기 (yml 파일 작성)
- documentation: MIT License 등록 HOT 1
- fix: 3차 현업자 및 거의 현업자의 코드리뷰
- design: 버튼의 접근성 고려해보기 HOT 1
- bug: 확대했을 때 다크모드가 제대로 적용이 안되는 버그 HOT 1
- documentation: 커밋메시지 수정하기 HOT 1
- documentation: react-helmet 적용 HOT 2
- bug: 해당 라이프사이클 버그메시지 없애기 HOT 1
- documentation: Open Graph 등록하기 HOT 1
- fix: 4차 현업자 및 거의 현업자의 코드리뷰 HOT 1
- enhancement: 웹 접근성 향상을 위한 노력 HOT 1
- bug: D-day에서 3월 31일에서 2월로 바꿨을 때 31일이 유지되는 현상 HOT 1
- design: 글자를 명료하게 바꾸기 HOT 1
- bug: 1920 이하의 화면에선 가로와 세로 스크롤이 보임 HOT 2
- design: 다크모드시 탭 버튼이 너무 다닥다닥 붙어있는거같은 느낌? HOT 1
- enhancement: 버튼으로 분 증가시키기
- enhancement: 뽀모도로 기능 추가
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ssocotimer.