스크롤

[CSS] 스크롤바 없애기(숨기기)

파이어폭스와 익스플로러는 기타 브라우저와 다른 코드를 적용해줘야합니다. 예제 코드 See the Pen Scrollbar hide by hyukson (@hyukson) on CodePen. 코드 /* ( 크롬, 사파리, 오페라, 엣지 ) 동작 */ .scroll::-webkit-scrollbar { display: none; } 영역::-webkit-scrollbar : 스크롤바 영역에 대한 설정으로 display: none 속성으로 스크롤바를 없앨 수 있습니다. .scroll { -ms-overflow-style: none; /* 인터넷 익스플로러 */ scrollbar-width: none; /* 파이어폭스 */ } 익스플로러, 파이어폭스는 -webkit-scrollbar 코드로 동작이 되지 않으며..

[CSS] 스크롤에 따라 움직이는 배경 이미지

코드 background-attachment: fixed; /* background-image에만 적용 */ background-attachment 속성은 background-image에 적용되며, 배경 이미지를 스크롤 시에도 고정시켜서 마치 따라오는 듯한 효과를 줄 수 있습니다. - scroll(기본값) : 스크롤 시 페이지와 함께 같이 움직이는 속성입니다. - fixed : 스크롤 시 보이는 페이지(viewport)와는 다르게 배경 이미지는 고정됩니다. 예제 코드 See the Pen CSS Background Image attachment by hyukson (@hyukson) on CodePen. 배경을 채운 디자인 요소와 그 사이에 배경 이미지로 쓰일 요소를 추가해줍니다. div { width:..

[JS] 특정 요소 스크롤 최하단 고정 시키기

실시간 채팅 기능을 제작하던 중 특정 요소에 다른 요소가 추가되어도 overflow 스크롤 속성이 적용된 영역이 아래로 내려가지 않고 상단에 고정되어 추가되는 현상을 해결해보았습니다. 코드 const $element = document.querySelecotr("div"); $element.scrollTop = $element.scrollHeight; scrollHeight 는 스크롤이 가능한 높이를 뜻합니다. 즉 해당 높이는 스크롤의 최하단을 의미하므로 특정 요소의 scroll을 가능한 길이 만큼 강제로 이동시킵니다. const $element = document.querySelecotr("div"); // 현재의 최하단 구하기 const eh = $element.clientHeight + $eleme..

[JS] 페이지 상단(하단)으로 이동하는 버튼 구현하기

버튼 클릭 하나만으로 웹 페이지의 상단으로 이동하는 기능을 구현해보겠습니다. 코드 맨 위로 .moveTopBtn { position: fixed; bottom: 1rem; right: 1rem; width: 4rem; height: 4rem; background: #000; color: #fff; } 간단한 HTML 코드로 버튼을 만들어 줍니다. 대부분의 해당 버튼은 페이지 오른쪽 하단에 위치하기에 fixed 속성을 통해 고정시켜주었습니다. const $topBtn = document.querySelector(".moveTopBtn"); // 버튼 클릭 시 맨 위로 이동 $topBtn.onclick = () => { window.scrollTo({ top: 0, behavior: "smooth" }); ..

[JS] 스크롤 방향 감지하기

아래로 이동하고 있는지, 위로 이동하고 있는지를 scroll 이벤트로 감지할 수 있습니다. 예제 코드 See the Pen Untitled by hyukson (@hyukson) on CodePen. 이전 위치를 기록하여 비교하기 let lastScrollY = 0; addEventListener("scroll", e => { const scrollY = window.scrollY; // 이전의 스크롤 위치와 비교하기 const direction = scrollY > lastScrollY ? "Scroll Down" : "Scroll Up"; // 현재의 스크롤 값을 저장 lastScrollY = scrollY; console.log(direction); }); 현재의 scroll 된 위치는 window..

[JS] 스크롤 애니메이션 구현 (Intersection Observer)

Intersection Observer API로 스크롤 애니메이션을 쉽게 구현할 수 있습니다. Intersection Observer API const options = { root: null, rootMargin: "0px", threshold: 1.0, }; const observer = new IntersectionObserver((entries) => { // 관찰 중인 배열 형식의 객체 리스트 entries.forEach((entry) => { ... }); }, options); // target과 root가 교차되어 화면에 보이게 되었을 때 호출되는 함수 const target = document.querySelector('div'); observer.observe(target); // 새로..

[JS] 페이지 내 특정 위치로 스크롤 이동하기

페이지 내 특정 위치로 이동 시켜주는 window.scrollTo 메서드를 활용하는 방법을 소개해드리겠습니다. window.scrollTo 메서드 window.scrollTo 메서드를 사용하는 다음과 같이 X, Y 위치 값을 넘겨주면 즉시 해당 위치로 이동하게 됩니다. // ( x좌표 - 가로 , y좌표 - 세로 ) window.scrollTo(xpos, ypos); HTML 삽입 미리보기할 수 없는 소스 객체를 이용해서도 메서드를 사용할 수 있으며, left(가로), top(세로) 값으로 X, Y 값을 대신할 수 있습니다. { behavior: "smooth" } 속성을 지정해주면 위치를 이동할 때, 애니메이션 효과가 적용되게 됩니다. // option { left, top, behvior } wind..