css지옥에서 탈출하자(10) - 현재 내가 얼마나 스크롤(scroll)했는지 부여주고 싶을 때, 진행도(progressed) 표시

이 시리즈는 필자가 웹프로그래밍을 겪으면서 생각처럼 잘안되고 짜증나는 css를 효율적이게 쓰기위해서 만든 시리즈이다.

여기에 들어온 여러분들도 이 쓰레기 같은 css의 고통을 같이 덜수 있기를 바란다.

참고:

css지옥에서 탈출하자(1) - 인라인 요소(inline element)와 블록 요소(block element)는 다르다.

css지옥에서 탈출하자(2) - display와 인라인(inline), 블록(block) 그리고 div를 display를 이용해서 옆으로 나열

css지옥에서 탈출하자(3) - display와 flex, 세로로 뭔가 배치하고 싶다면 flexbox를 쓰자, (추가로 div를 flex로 나열, 비율에 맞게 div 세로로 배치)

css지옥에서 탈출하자(4) - display: flex와 margin: auto를 이용해서 기존의 문제 해결(header나 nav에서 한 엘리먼트만 좌측 배치, 바닥에 붙는 footer, 수직 중앙정렬)

css지옥에서 탈출하자(5) - 엘리먼트를 드래그 앤 드랍(drag and drop)으로 자유롭게 옮긴다고?

css지옥에서 탈출하자(6) - css로 삼각형을 그려보자

css지옥에서 탈출하자(7) - display inline-block 나열시 공백 제거하기

css지옥에서 탈출하자(8) - div에 transition을 줘서 부드럽게 애니메이션 효과로 움직이기

css지옥에서 탈출하자(9) - 스크롤바가 없는 스크롤을 만든다?

가끔 가다보면 이런페이지들 나온다. 내가 스크롤 했는지 알려주는 것인데 옜날에 이거보면 신기하다고 생각했다.

이번에 여러분이 이런 스크롤과 관련된 이벤트를 사용하고 싶다면 사실 만들기는 어렵지 않다.

그래서 개념위주로 설명드리려고한다.

예제와 코드가 모두 들어있다.

하지만 이렇게 코드만 던져 놓으면 대책 없으니 코드를 설명하도록 하겠다.

이건 js도 좀 써야한다는 단점이 있다.

.progressbar {
    position: fixed;
    width: 100%;
    height: 20px;
    background-color: gray;
}
.progress{
    width: 0;
    height: 100%;
    background-color: greenyellow;
    transition: width 1s linear 0s;
}

일단 먼저 해야하는 일은 progressbar를 겉으로 감싼다. 그 다음 position은 fixed로 준다.

그러면 상단에 배치되서 드래그해도 계속 상단에 보이게 된다.

그리고 아래 progress는 미리 width를 0으로 시작한다.

안하면 어떤일이 생길지 예측할 수 없다... 순수한 의미로 예측할 수 없다. 100%차있을수도있고 0%일 수 있다.

그럼으로 progress는 0을 준다.

그리고 transition을 줘서 자연스럽게 차오르게 할 것이다.

body,html{
    margin: 0px;
    padding: 0px;
}

body와 html이 가지고 있는 태생적인 공백을 제거해준다.

예제를 위한것이므로 안해도 상관없다.

window.addEventListener('scroll', function () {
    var bodyEl = document.querySelector('body');
    var bodyHeight = bodyEl.offsetHeight;
    var scrollable = bodyHeight - window.innerHeight;
    var progressEl = document.querySelector('.progress');
    var per = Math.floor(window.scrollY / scrollable * 100) + '%';
    progressEl.style.width = per;
});

중요한건 코드이다.

어렵진 않지만 이해가 필요하므로 왜 이런코드를 짰는지 해석해주겠다.

window.addEventListener('scroll', function () {}

스크롤 이벤트시 색을 채울 것이므로 당연히 이벤트는 scroll로 해준다.

var bodyEl = document.querySelector('body');
var bodyHeight = bodyEl.offsetHeight;
var scrollable = bodyHeight - window.innerHeight;

그 다음 알아야할 것은 스크롤가능한 구간의 길이이다.

스크롤가능 구간의 길이를 명시적으로 알려주지는 않는다.

그래서 우리가 직접 계산해야한다. 계산 방법은 현재 브러우저 자체의 내부길이(innerHeight)와 body엘리먼트 전체 길이를 뺀다.

왜냐하면 스크롤이란게 안보이는 부분만을 보이기위해서 하는거기 때문인데 이게 동적으로 바뀌어서 그렇다.

var progressEl = document.querySelector('.progress');
var per = Math.floor(window.scrollY / scrollable * 100) + '%';
progressEl.style.width = per;

그 다음 현재 전체 스크롤 가능 크기에서 현재 스크롤 위치를 나눈후 100을 곱하면 퍼센테이지가 나온다.

그 값을 width값으로 넣어주면 동적이게 크기게 바뀌게 된다.

우리가 의도한대로 프로그레스바를 만들 수 있다.

이를 응용해서 스크롤해야 생기는 div등이나 채팅시 자동으로 스크롤이 올라가게 만드는게 가능하다.