가로 스크롤 만들기

모바일 웹에서 유용하게 쓰이는 가로 스크롤 만드는 방법을 기록해보려 한다.

1. 가로스크롤을 적용시킬 div에 class를 달아준다.
   여기서는 class="scroll-x"

   <div class="scroll-x" role="tablist">
     <div class="tab-inner">
       <a href="#" class="tab" role="tab"><span class="txt">홈</span></a>
       <a href="#" class="tab" role="tab"><span class="txt">메뉴</span></a>
       <a href="#" class="tab" role="tab"><span class="txt">리뷰</span></a>
       <a href="#" class="tab" role="tab"><span class="txt">사진</span></a>
   	```

2. 가로 스크롤 class에 기능을 만들어 두고 향후 간편히 사용할 수 있도록 한다. 이 내용은 _preset.scss와 같은 파일에 넣어두고 class만 html에 적으면 된다.

    .scroll-x{
       overflow-x: auto;
       overflow-y: hidden;
       white-space: nowrap:
       -webkit-overflow-scrolling: touch;
       -ms-overflow-style: none;
       scrollbar-width:

-webkit-overflow-scrolling: touch -> pc보다 모바일에서 사용하는데, 모바일에서 터치로 스크롤이 발생될 시에 가속도가 붙은 스크롤링이 가능하게 한다.
-ms-overflow-style: none; IE에서 스크롤 바 영역을 감춰준다.
scrollbar-width: none; firefox에서 스크롤 바 영역을 감춰준다.
&::-webkit-scrollbar {display: none;} chrome에서 스크롤 바 영역을 감춰준다.

✔️ class 말고 따로 관리하고 싶을때는 mixin_common.scss를 만들어서 여기에 넣어 두고, 해당 scss파일에 @include scroll-x; 를 작성해준다.

    @mixin scroll-x{
    }

❗️이 때, 새로 만든 mixin_common.scss 파일을 꼭 style.css에 import 해준다.
@import "./abstracts/mixin_common.scss";