Hyun1008.log

#개발과정 #VanillaJS

포트폴리오 사이트를 만드는 중 프로젝트를 보여줄 때는 가로스크롤을 하는 게 좋을 것 같아서 만들어 보았습니다.

우선 이렇게 구조를 짰습니다.

        <div id="content1">
            <div id="content-scroll">
                <div class="width-fix">
                    <h1>Items.</h1>
                    <div class="overflow-width">
                    </div>
                </div>
            </div>
        </div>

CSS에서는 .overflow-width 에만 position: relative 를 적용해 주었습니다. 그리고 자바스크립트에서는 다음과 같은 코드를 적용했어요.

    document.querySelector('.overflow-width').style.left=`0`;
    // 이게 없으면 후에 style.left 를 불러오지 못합니다.
    document.querySelector('#content-scroll').addEventListener('wheel',function(e){
        if(e.deltaY > 0){
        // 스크롤을 내리고 있으면,
            if (parseInt(document.querySelector('.overflow-width').style.left) > -100) {
                // 가로스크롤이 충분히 진행되지 않았으면(=스크롤이 필요하면)
                e.preventDefault();
                e.stopPropagation();
                // 기존 세로 스크롤을 막습니다.
                document.querySelector('.overflow-width').style.top=`0%`;
                document.querySelector('.overflow-width').style.left = `${parseInt(document.querySelector('.overflow-width').style.left) - 1}%`;
                // 그리고 스크롤 양에 따라 요소의 위치를 옮겨줍니다.
            }
        } else if (e.deltaY < 0) {
        // 스크롤을 올리고 있으면,
            if (parseInt(document.querySelector('.overflow-width').style.left) < 0) {
                // 가로스크롤이 충분히 돌아오지 않았으면(=스크롤이 필요하면)
                // 아래 내용은 동일합니다.
                e.preventDefault();
                e.stopPropagation();
                document.querySelector('.overflow-width').style.top=`0%`;
                document.querySelector('.overflow-width').style.left = `${parseInt(document.querySelector('.overflow-width').style.left) + 1}%`;
            }
        }
    });

남의코드 복붙해야지 히히 하고 들어갔다가 저한테 맞는 방법, 제가 당장 필요한 방법은 따로 있다는 사실을 깨달았습니다.

물론 제가 당장 필요한 방법을 구현해 놓은 포스트가 있었다면 완전 럭키비키겠지만요.

그래도 최대한 제가 만들어보고 남의 손을 빌리는 게 맞는 것 같습니다.