CSS 스크롤바 없애기 - CSS seukeulolba eobs-aegi

Westagram 스크롤 기능은 살리고 스크롤바는 없애기

스크롤 기능은 존재하되, 스크롤바가 보이지 않는 css 효과에 대해 알아봅시다!

💡먼저, 스크롤 기능을 추가하려면?

    안녕하세요.

    어쩌다 이곳에 오셨나요? 

    스크롤바 기능을 구현하려고 하시나요?

    그런데 스크롤바는 없애고 싶은가요?

    얼른 알려드리겠습니다. 

    조금만 밑으로 내려주세요.

    다왔습니다.

    이 스크롤 바가 아니고 전체 스크롤바를 내려주세요.

    😎

안녕하세요.
어쩌다 이곳에 오셨나요?
스크롤바 기능을 구현하려고 하시나요?
그런데 스크롤바는 없애고 싶은가요?
얼른 알려드리겠습니다.
조금만 밑으로 내려주세요.
다왔습니다.
이 스크롤 바가 아니고 전체 스크롤바를 내려주세요.
😎

🙋‍♀️ 전체 스크롤 바를 없애고 싶어요!

body{
 -ms-overflow-style: none;
 }
 
::-webkit-scrollbar {
  display: none;
}

🙋‍♂️ 특정 부분 스크롤바를 없애고 싶어요!

.box{
   -ms-overflow-style: none;
}
.box::-webkit-scrollbar{
  display:none;
}

* 참고 사항

1. overflow: visible;
기본값. 사이즈를 넘 칠경 우 글이 상자 밖으로 보임.

2. overflow: hidden;
사이즈를 넘 칠경 우 글이 잘림.

3. overflow: scroll;
사이즈를 넘칠경우 가로 세로 모두 스크롤이 추가.

4. overflow: auto;
양에 따라 스크롤이 자동으로 추가될지 결정.

5. overflow-x, overflow-y
가로, 세로 overflow를 각각 제어하고자 한다면 overflow-x와 overflow-y를 사용.

출처: https://wooaoe.tistory.com/49 [개발개발 울었다]

티스토리 뷰

YG - 96년생 , 강아지 있음, 개발자 희망 2021. 5. 26. 09:00

이를 숨기는 방법

.screen-box{
	-ms-overflow-style:none /* IE and Edge */
    scrollbar-width:none /* Firefox */
}

.screen-box::-webkit-scrollbar {
	display:none /* Chrome , Safari , Opera */
}

브라우저 환경에 따라 사용하면 되겠다

::-webkit-scrollbar 유사 요소 선택기를 사용하여 CSS에서 요소의 스크롤바 스타일을 지정할 수 있습니다. 그러나 이 선택기는 Chrome, Opera, Safari, Edge 등을 포함한 Webkit 기반 브라우저에서만 사용할 수 있습니다. ::-webkit-scrollbar 의사 요소를 사용하여 웹 페이지의 전체 스크롤 막대를 선택하고 설정할 수 있습니다. display 속성을 none으로 변경합니다. 긴 웹페이지를 스크롤할 수는 있지만 스크롤바가 숨겨집니다.

예를 들어, PHP 파일을 만들고 파일에 기본 HTML 구조를 작성합니다. body 섹션 내에서 PHP 태그 를 열고 $text 변수에

::-webkit-scrollbar {
display: none;
}

::-webkit-scrollbar {
display: none;
}

";

}
?>

::-webkit-scrollbar {
display: none;
}

::-webkit-scrollbar {
display: none;
}

::-webkit-scrollbar {
display: none;
}

::-webkit-scrollbar {
display: none;
}

::-webkit-scrollbar {
display: none;
}

";
}
?>

";
}
?>

";
}
?>

::-webkit-scrollbar {
display: none;
}

::-webkit-scrollbar {
display: none;
}

";
}
?>

::-webkit-scrollbar {
display: none;
}

::-webkit-scrollbar {
display: none;
}

";
}
?>

::-webkit-scrollbar {
    display: none;
}

/* Chrome, Safari, Opera 스크롤바 숨기기 */
.example::-webkit-scrollbar {
  display: none;
}

/* IE, Edge 스크롤바 숨기기 */
.example {
  -ms-overflow-style: none;
}

overflow-y: hidden; /* 세로 스크롤바 숨기기*/
overflow-x: hidden; /* 가로 스크롤바 숨기기 */