티스토리 뷰
이전에 스크롤을 부드럽게 하는 방법에 대해 포스팅을 했었는데, css로도 풀 수 있어서 기록용으로 남겨둔다.
✔️ 스크롤을 부드럽게 움직이는 JS 방법
https://hyermione.tistory.com/115
js scroll을 부드럽게 만드는 방법 (+ 사파리 적용)
scroll을 smoth하게 올라가는 기능이 사파리에서 지원된다고 한다. 관련해서 정리해보려고 한다. ✔️ 스크롤을 부드럽게 움직이기 https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo Window.scrollTo() -
hyermione.tistory.com
✔️ 스크롤을 부드럽게 움직이는 css 방법
css로 풀어내는것은 매우 간단한데, html에 다음과 같은 코드를 넣어주면 된다. (혹은 적용하고자 하는 부분에 넣어도 무방할 것이다)
html {
scroll-behavior: smooth;
}https://www.w3schools.com/howto/howto_css_smooth_scroll.asp
How To Create a Smooth Scrolling Effect
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
✔️ css로 풀었을 때의 장점
css로 풀었을 때의 장점이 있다. JS로 풀었을 때 사파리는 15.4 버전부터 적용이 가능하여 별도의 처리가 필요하였는데, css는 무려 14버전부터 지원이 가능하다
'TIL:Today I Learn > etc' 카테고리의 다른 글
| 사파리와 파이어폭스 그리고 크롬의 차이점은 bfcache이다. (1탄) (0) | 2022.08.18 |
|---|---|
| npm과 yarn의 차이점 (0) | 2022.08.12 |
| [css] 화면에서 마크업을 노출시키지 않는 방법. (0) | 2022.08.05 |
| Retry와 timeout의 관계 (0) | 2022.08.04 |
| 프론트엔드 추천 자료 URL 공유 (0) | 2022.08.01 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 리액트상태관리
- storybookUI
- 센트리
- 센트리모니터링
- react
- 프론트엔드
- vue
- Git
- 모바일사파리
- BFCache
- 김민태
- 깃
- npm
- 깃명령어
- 자바스크립트
- 프론트앤드
- 리코일
- js
- 리액트훅
- CSS
- 크롬
- reacthook
- sentry
- 사파리
- js테스트
- 리액트
- frontend
- TIL
- gitRebase
- javascript
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
글 보관함