root@bskyvision: ~#
방명록
태그
RSS

<닫기>

3,561,886/3,854/1,390

프로필사진
수많은 소음 속에서 신호를 찾아가는 bskyvision입니다.


<닫기>

  • 꼬장이이(가) 07.25에 작성한 댓글: test.

<닫기>


안녕하세요. 비스카이비전입니다. 오늘은 웹 페이지 특정 요소에서 스크롤이 작동은 하지만 스크롤은 보이지 않게 하는 방법에 대해 살펴보도록 하겠습니다. 

 

test라는 id를 부여받은 div 요소가 있다고 가정하겠습니다. 너비를 200px로 고정시켰고, 배경색은 하늘색을 넣어줬습니다. 

 

<div id="test" style="width: 200px; background-color:skyblue;">
    <p>안녕하세요.</p>
    <p>수많은 소음 속에서</p>
    <p>진짜 신호를</p>
    <p>찾아가는</p>
    <p>비스카이비전입니다.</p>
    <p>반갑습니다.</p>
    <p>오늘도 행복하세요.</p>
</div>

 

 

스크롤바 넣기

이 div 요소의 높이를 한정시킨 후 스크롤바를 넣어보겠습니다. 요소의 높이가 한정되어 있지 않으면 스크롤 기능이 들어가지 않습니다. 별도의 css 파일에서 id가 test인 요소의 스타일을 정의하겠습니다.

 

#test {
    width: 200px; 
    height: 200px;
    background-color:skyblue;
    overflow-y: scroll;
}

 

 

스크롤바가 생긴 것을 확인하실 수 있습니다.

 

스크롤 기능만 남기고, 스크롤바는 없애기

이제 스크롤 기능만 남기고 스크롤바는 없애보도록 하겠습니다. css 파일에 관련된 코드를 추가해주면 됩니다. 웹 브라우저별로 조금 다른 코드가 필요합니다. 주석을 참고하세요. 

 

#test {
    width: 200px; 
    height: 200px;
    background-color:skyblue;
    overflow-y: scroll;

    -ms-overflow-style: none; /* 인터넷 익스플로러 */
    scrollbar-width: none; /* 파이어폭스 */
}

#test::-webkit-scrollbar {
    display: none; /* 크롬, 사파리, 오페라, 엣지 */
}

 

크롬, 엣지, 인터넷 익스플로러, 파이어폭스에서 확인해본 결과 모두 잘 적용되었습니다. 스크롤바는 없어졌지만, 스크롤 기능은 잘 남아 있습니다.

 

 

그런데 저 스스로 약간 헷갈리는 부분이 있습니다. 원래는 -ms-overflow-style: none;을 넣어줘야 인터넷 익스플로러 뿐만 아니라 엣지에서도 스크롤바 없애기가 적용되는 걸로 알고 있었는데, 지금은 크롬, 사파리, 오페라에 필요한 코드를 넣었을 때 엣지에서도 스크롤바 없애기가 적용됩니다. 아마도 크롬과 엣지가 같은 크로미움 엔진(?)을 써서 그런 것 같습니다.

  1. 꼬장스카이비전이(가) 2022.08.06 09:21에 작성한 댓글:
    링크 클릭하면 제품구매 페이지가나오는데요 원하는 링크가 이건가요?

    https://support.microsoft.com/ko-kr/microsoft-edge/%EC%83%88-chromium-%EA%B8%B0%EB%B0%98-microsoft-edge-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-0f4a3dd7-55df-60f5-739f-00010dba52cf
      주소   수정/삭제   답글
    • 비스카이비전이(가) 2022.08.06 17:13 신고에 작성한 답글:
      엇, 원래는 관련된 내용이 있었는데 지금은 그 내용이 보이지가 않네요^^; 알려주셔서 감사합니다. 그 참고자료 링크는 글에서 빼도록 하겠습니다.   주소   수정/삭제
이름
비밀번호
홈페이지
비밀여부