[CSS] Styled-components + 터치 스크롤 구현하기

여러 장의 카드를 가로로 놓고, 터치 스크롤 형식으로 자유롭게 좌우로 움직이고 싶었다! 

 

728x90

 

---

 

좌우로 움직이는 터치 스크롤 구현하기

1. 스크롤 영역 내 내용을 줄 바꿈 하지 않고 표시하기 위해서 white-space: nowrap;

2. 스크롤 영역 벗어나는 부분 가리기 위해서 overflow-x: auto;

3. 스크롤 영역 내 들어갈 아이템 카드에 display: inline-block;

 

전체 코드

import React from "react";
import styled from "styled-components";

const CardScroll = () => {
    return (
        <div>
            <CardView>
                <Card />
                <Card />
                <Card />
            </CardView>
        </div>
    )
}

export default ScrollCard;

const CardView = styled.div`
    width: 100%;
    height: 100%;
    white-space: nowrap; 
    overflow-x: auto;
    ::-webkit-scrollbar {
        display: none;
    } 
`;

const Card = styled.div`
    width: 150px;
    height: 200px;
    margin-right: 10px; 
    display: inline-block;
    background-color: skyblue;
`;

 

결과 화면