스크롤은 되지만 스크롤바는 안보이게...

제이쿼리로도 방법이 있을꺼 같은데

검색해도 안나온다. ㅠㅠ 잘 못찾겠어서...

요즘 만들고 있는 포폴이 있는데

스크롤은 되지만 스크롤 바는 보이지 말아야 한다는 거다;; 엄...

어떤 사이트가 있냐면...

http://m.koreapac.kr/Home/Index.aspx

요 사이트가 대략 그렇다.

모바일 전용메뉴...

우측 끝자락에 저거 제대로 된거 아냐? 라고 생각한다면 직접 사이트를 방문해서 확인하면 어떤 메뉴인지 이해가 빠르다

.

.

.

.

.

마크업 부터 시작해 보자.

먼저 내용을 담아야 하는 영역이 있어야 한다.

<ul>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
        <li>menu5</li>
        <li>menu6</li>
        <li>menu7</li>
        <li>menu8</li>
        <li>menu9</li>
        <li>menu10</li>
</ul>

ul의 영역을 200px로 값을 지정해두고

li 에 높이값과 보더값을 줘서 충분히 구분되게 만들어 준다.

ul{width:200px;}
li{
    height:50px;
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid blue;
    background-color: yellow;
}

중간 결과..

유의 할 것이 있다면 이 ul영역이 스크롤이 생겨 그걸 숨겨야 하는게 아니라

ul 영역을 감싸는 부분이 스크롤이 생겨야 한다는 것이다. 그렇기 때문에 ul 을 감싸는 영역을 만들어 보자

<div class="scrollBlind">
    <ul>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
        <li>menu5</li>
        <li>menu6</li>
        <li>menu7</li>
        <li>menu8</li>
        <li>menu9</li>
        <li>menu10</li>
    </ul>
</div>

scrollBlind 의 너비값은 ul 의 너비값보다 크게 만들어 주자.

그 이유는 숨겨야 하는 스크롤바를 안쪽에 만들어 주는게 아닌 바깥쪽에 만들어 주기 위해서다.

.scrollBlind{
    width:230px;
    height:100%;
    overflow-y:scroll;
    background-color: green;
} 

// 감싸는 영역의 높이값을 100% 로 준 이유는 li의 갯수가 더 늘어날 수도 있기 때문에 정해진 값을 주는것 보다 차라리 그만큼 늘어나라고 하는게 좋을꺼라 판단되었다.

그리고 overflow-y 는 우측 스크롤인데 인제 저 부분을 가리면 원하는 결과를 만들어 낼 수 있다.

중간 스샷

인제 보여줘야 하는 영역을 설정하기 위해

다시 한번 scrollBlind 를 감싸주는 영역을 만든다.

<div class="view">
    <div class="scrollBlind">
        <ul>
            <li>menu1</li>
            <li>menu2</li>
            <li>menu3</li>
            <li>menu4</li>
            <li>menu5</li>
            <li>menu6</li>
            <li>menu7</li>
            <li>menu8</li>
            <li>menu9</li>
            <li>menu10</li>
        </ul>
    </div>
</div>

이제 view 영역에 대한 값을 지정해 주면 끝이난다.

view는 딱 ul 이 가지고 있는 너비 만큼만 보여주면 되기 때문에 ul의 너비값과 동일하게 

css 를 적용해 주면 된다.

.view{
    width:200px;
    height:260px;
    position: absolute;
    border:1px solid red;
    overflow: hidden;
}

// 여기서 오버플로우 hidden은 당연히 넘어가는 scrollBlind의 영역때문에 주었고

포지션 값은 안줘도 상관없다. 저건 위치를 좀더 자유롭게 잡기 위해서 넣어준것이다.

완성본▼