고정

[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..