-
스크롤 최상단으로 이동 css vs jsCSS 2021. 2. 7. 21:23
스크롤 최상단으로 이동하는 방법에 css와 js가 있습니다.
<div class="bar"> <a href="#">스크롤 최상단 css</a> <a href="#" id="js-scroll">스크롤 최상단 JS</a> </div>
css
html { scroll-behavior: smooth; }
위 처럼 스크롤 상태에 대한 smooth 속성을 사용해서 scroll을 부드럽게 처리할 수 있기 때문에 #인 포지션인 0으로 갈 때 부드럽게 이동합니다.
js
document.querySelector("#js-scroll").addEventListener("click", (e) => { e.preventDefault(); window.scroll({ top: 0, left: 0, behavior: "smooth" }); });
위의 방법도 스크롤을 부드럽게 처리하기 위한 옵션이 들어갑니다.
이 두가지 방법은 중요한 차이가 있습니다.
차이점 CSS JS Chrome 통제가능 (스피드:천천히) 통제 불가능 FireFox 통제가능 (스피드:매우빠르게) 통제가능(스피드:빠르게) Safari 스무스 스크롤링 안됨 스무스 스크롤링 안됨 Edge 통제가능(스피드:빠르게) 통제 불가능 iOS 스무스 스크롤링 안됨 스무스 스크롤링 안됨 - CSS 또는 Javascript를 통해 트리거되는 부드러운 스크롤 동작을 취소할 수 있습니다.
- 속도를 제어 할 수 있도록하거나 그렇지 않은 경우 브라우저가 중간 속도를 유지할 수 있도록 하세요.
'CSS' 카테고리의 다른 글
CSS Contain 속성에 대하여.. (0) 2021.02.12 햄버거 메뉴 라인 애니메이션 (SVG & CSS) (0) 2021.02.12 SVG 라이브러리 (RoughNotation) 선긋기, 하이라이트 (0) 2021.02.06 CSS Cascading 잘하기 (0) 2021.02.02 [Modern CSS] 3탄 CSS만으로 반응형 풀사이즈 이미지 크기 만들기 (0) 2021.01.31