CSS에서 스크롤 막대 숨기기
-
CSS에서 스크롤 막대를 숨기려면
::-webkit-scrollbarPseudo-Element에 대해display를none으로 설정하십시오 -
CSS에서 스크롤 막대를 숨기려면
scrollbar-width를none으로 설정하십시오
이 튜토리얼에서는 웹 페이지를 스크롤하는 동안 웹 페이지에서 스크롤 막대를 숨기는 몇 가지 방법을 소개합니다.
CSS에서 스크롤 막대를 숨기려면 ::-webkit-scrollbar Pseudo-Element에 대해 display를 none으로 설정하십시오
::-webkit-scrollbar 유사 요소 선택기를 사용하여 CSS에서 요소의 스크롤바 스타일을 지정할 수 있습니다. 그러나 이 선택기는 Chrome, Opera, Safari, Edge 등을 포함한 Webkit 기반 브라우저에서만 사용할 수 있습니다. ::-webkit-scrollbar 의사 요소를 사용하여 웹 페이지의 전체 스크롤 막대를 선택하고 설정할 수 있습니다. display 속성을 none으로 변경합니다. 긴 웹페이지를 스크롤할 수는 있지만 스크롤바가 숨겨집니다.
예를 들어, PHP 파일을 만들고 파일에 기본 HTML 구조를 작성합니다. body 섹션 내에서 PHP 태그 <?php를 열고 $text 변수에 Hello World 텍스트를 작성합니다. 변수를 100번 반복하고 텍스트를 표시합니다. CSS에서 ::-webkit-scrollbar 의사 요소를 사용하여 스크롤 막대를 선택합니다. 그런 다음 display 속성을 none으로 설정합니다.
위의 예에서는 PHP를 사용하여 텍스트를 100번 반복하여 웹 페이지를 스크롤하는 데 웹 페이지가 길어지도록 했습니다. PHP 코드는 Hello World 텍스트가 새 줄에 100번 인쇄되도록 합니다. display 속성을 none으로 설정하면 스크롤바가 숨겨지지만 여전히 페이지를 스크롤할 수 있습니다. 따라서 숨겨진 스크롤 막대 기능을 얻을 수 있습니다.
예제 코드:
<body>
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
</body>
}
?>
::-webkit-scrollbar {
display: none;
}
CSS에서 스크롤 막대를 숨기려면 scrollbar-width를 none으로 설정하십시오
scrollbar-width 속성을 사용하고 none으로 설정하여 CSS에서 스크롤바를 숨길 수 있습니다. 웹 페이지에서 스크롤바를 숨깁니다. 다른 옵션인 auto는 기본 스크롤바를 설정하고 thin 옵션은 브라우저에 따라 스크롤바를 더 얇게 보이게 합니다. 그러나 속성은 Firefox 브라우저에서만 작동합니다. 스크롤 기능이 콘텐츠를 클리핑하도록 유지하기 위해 overflow-y 속성을 사용합니다. 블록 수준 요소가 상단과 버튼 가장자리에서 넘칠 때 작동합니다. 스크롤바 비활성화를 보여주기 위해 첫 번째 방법과 동일한 PHP 스크립트를 사용할 수 있습니다.
예를 들어 container 클래스로 div를 생성합니다. div 내부에서 첫 번째 방법과 같이 텍스트를 반복합니다. CSS에서 컨테이너에 약간의 너비와 높이와 함께 배경색을 지정합니다. scrollbar-width 속성을 none으로 설정하고 overflow-y 속성을 scroll로 설정합니다.
아래 예에서 scrollbar-width를 none으로 설정하면 스크롤바가 숨겨지고 overflow-y가 scroll로 설정되면 스크롤 기능이 계속 활성화됩니다. 이런 식으로 스크롤바를 숨기고 있는 긴 페이지를 스크롤할 수 있습니다.
예제 코드:
<body>
<div class="container">
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
}
?>
</div>
</body>
.container {
scrollbar-width: none;
background-color: #bbb;
width: 500px;
height: 600px;
overflow-y: scroll;
}
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn