[Javascript] overflow를 이용한 row scroll

나의 퍼블리싱 실력을 알아보기 위해 진행된 테스트이다! 

진짜 개발자는 끝없이 공부를 해야 하는 것 같다.. 

🔍️ 구현해야할 부분

 

우선 내가 똑같이 퍼블리싱해야 할 부분이다. 보고 생각한건,, 처음이 고정이니까 overflow-x scroll을 이용해서 구현하면 되겠다! 라는 생각이 들었다.

🖼️ HTML

    <div id="content5">

        <div class="cont5-wrap">

            <div class="cont5-title">

                <h2 class="insta-title">인스타그램</h2>

            </div>

            <div class="insta-wrap" id="slider">

                <div class="insta-img">

                    <img src="인스타그램 이미지1.png" class="-insta">

                    <img src="인스타그램 이미지2.png" class="insta">

                    <img src="인스타그램 이미지3.png" class="insta">

                    <img src="인스타그램 이미지1.png" class="insta">

                    <img src="인스타그램 이미지2.png" class="insta">

                    <img src="인스타그램 이미지3.png" class="insta">

                    <img src="인스타그램 이미지1.png" class="insta">

                    <img src="인스타그램 이미지2.png" class="insta">

                    <img src="인스타그램 이미지2.png" class="insta">

                    <img src="인스타그램 이미지3.png" class="insta">

                </div>

            </div>

        </div>

    </div>

 

🎨 CSS

#content5 {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 140px 0 160px 0;

}

.insta-title {

    text-align: center;

    margin-bottom: 40px;

}

.insta-wrap {

    overflow-x: hidden;

}

.insta-img {

    display: flex;

    gap: 24px;

    width: 100%;

    margin-left: 54px;

    width: 1846px;

}

제일 상위 div를 width를 100%로 주고 하위 부분은 사용자에게 보여줄 만큼만 width를 정해 넘치는 부분은 가려주었다.

📃 Javascript

    //인스타 드래그 슬라이드

    var isMouseDown = false;

    var startX;

    var scrollLeft;

   

    var slider = document.getElementById('slider');

   

    slider.addEventListener('mousedown', (e) => {

        isMouseDown = true;

        startX = e.pageX - slider.offsetLeft;

        scrollLeft = slider.scrollLeft;

    });

   

    slider.addEventListener('mouseleave', () => {

        isMouseDown = false;

    });

   

    slider.addEventListener('mouseup', () => {

        isMouseDown = false;

    });

   

    slider.addEventListener('mousemove', (e) => {

        if (!isMouseDown) return;

        e.preventDefault();

        var x = e.pageX - slider.offsetLeft;

        var walk = x - startX;

        slider.scrollLeft = scrollLeft - walk;

    });

✨ 결과

뿌듯하다 : )