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

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


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

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


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

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





요 사이트가 대략 그렇다.

모바일 전용메뉴...


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

.

.

.

.

.

마크업 부터 시작해 보자.


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

1
2
3
4
5
6
7
8
9
10
11
12
<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>
cs



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

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

1
2
3
4
5
6
7
8
ul{width:200px;}
li{
    height:50px;
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid blue;
    background-color: yellow;
}
cs


중간 결과..


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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
cs



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

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

1
2
3
4
5
6
.scrollBlind{
    width:230px;
    height:100%;
    overflow-y:scroll;
    background-color: green;
cs

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

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


중간 스샷




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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>
cs



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

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

css 를 적용해 주면 된다.

1
2
3
4
5
6
7
.view{
    width:200px;
    height:260px;
    position: absolute;
    border:1px solid red;
    overflow: hidden;
}
cs

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

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



완성본▼

댓글 12

  • 행인(1) (2015.05.21 11:58 신고)

    좋은글 감사합니다.
    예전에 이것 때문에 엄청 고생한적이있어서...ㅋ

  • 스니키 (2016.03.15 18:53 신고)

    감사해요 덕분에 잘 활용해서 썻어요^^

  • 오예글쓴님사랑해요 (2017.01.24 17:25 신고)

    이 게시글 지우지마세용 ㅠ_ㅠ 이거보고 완전 도움되었어요 감사해요

    • 회복맨 (2017.01.24 18:58 신고)

      도움이 되었다니 기쁘네요 :)
      게시물은 이렇게 찾아오시는 분들 덕분에 지우지 못하겠네요 ㅎㅎ

      방문해 주셔서 감사합니다 ^^

  • 호리호리 (2017.05.29 11:14 신고)

    그냥 scroll width값을 0px로 주면 되는 거 아닌가요?

    • 회복맨 (2017.05.29 23:01 신고)

      scroll bar의 width 값을 강제할 방법은 제가 알고 있는 지식으로는 딱히 떠오르지가 않네요. 혹시 css3 등을 이용한 scroll의 디자인 변형을 말씀하신건지 궁금합니다.
      혹시 좋은 방법이 있다면 이 블로그를 이용하시는 분들과 함께 정보공유를 해보시는건 어떨까 싶습니다.

      방문해 주셔서 감사합니다. :)

  • 내가바로용식 (2017.07.15 15:42 신고)

    하나씩 따라해보고있습니다 ㅎㅎ 감사합니닷 ㅎ

    • 회복맨 (2017.07.16 18:44 신고)

      ㅎㅎ 방문해 주셔서 감사합니다.
      종종 들려 주세요!

  • 정말 감사드립니다 ㅠㅠ (2018.01.05 12:06 신고)

    감사드려요 ㅠㅠ 포폴준비중에 어떻게 만들지 고민하고있었는데 아주 쉽게 ㄷㄷ설명을.. 잘 보고 갑니다!

    • 회복맨 (2018.01.05 13:37 신고)

      도움이 되었다니 저로서도 기쁘네요 ㅎㅎ
      방문해 주셔서 감사합니다 :)