CSS를 사용하여 스크롤바를 숨기려면 다양한 접근 방식을 이해해야 합니다. 스크롤바는 사용자가 볼 수 있는 창보다 더 큰 콘텐츠 영역을 탐색할 수 있게 해주는 웹 브라우저의 핵심 구성 요소입니다. overflow를 사용하여 스크롤 기능을 유지하면서 스크롤 막대를 숨길 수 있습니다. 속성입니다.
구문
selector {
overflow-x: value;
overflow-y: value;
}
/* Or shorthand */
selector {
overflow: value;
}
가능한 값
visible 콘텐츠가 잘리지 않으며 요소hidden 외부에서 렌더링될 수 있습니다. 콘텐츠가 잘리고 스크롤 막대가 숨겨집니다scroll 콘텐츠는 잘렸지만 스크롤 막대는 항상 표시됩니다auto 콘텐츠가 넘칠 때만 스크롤바가 나타납니다. 방법 1:세로 스크롤바 숨기기
가로 스크롤을 활성화한 상태에서 세로 스크롤 막대를 숨기려면 overflow-y: hidden를 설정하세요. 그리고 overflow-x: scroll
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow-y: hidden;
overflow-x: scroll;
border: 2px solid #333;
padding: 10px;
}
.content {
white-space: nowrap;
width: 500px;
background-color: #f0f8ff;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
This is a very long line of text that will extend beyond the container width and require horizontal scrolling to view completely.
</div>
<p>More content here that would normally cause vertical scrolling.</p>
<p>But the vertical scrollbar is hidden.</p>
</div>
</body>
</html>
A bordered container with horizontal scrollbar visible at the bottom, but no vertical scrollbar. The content extends horizontally and can be scrolled left/right.
방법 2:가로 스크롤바 숨기기
세로 스크롤을 활성화한 상태에서 가로 스크롤 막대를 숨기려면 overflow-x: hidden을 설정하세요. 그리고 overflow-y: scroll
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow-x: hidden;
overflow-y: scroll;
border: 2px solid #333;
padding: 10px;
}
.content {
background-color: #fff3cd;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>This is paragraph one with normal text content.</p>
<p>This is paragraph two with more content.</p>
<p>This is paragraph three adding even more text.</p>
<p>This is paragraph four to create overflow.</p>
<p>This is paragraph five for vertical scrolling.</p>
</div>
</div>
</body>
</html>
A bordered container with vertical scrollbar visible on the right side, but no horizontal scrollbar. The content extends vertically and can be scrolled up/down.
방법 3:두 스크롤바 모두 숨기기
가로 및 세로 스크롤 막대를 모두 완전히 숨기려면 overflow-x을 모두 설정하세요. 및 overflow-y hidden로
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow: hidden;
border: 2px solid #333;
padding: 10px;
}
.content {
background-color: #d1ecf1;
width: 500px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>This content extends both horizontally and vertically beyond the container boundaries.</p>
<p>However, no scrollbars are visible, so the overflowing content is simply clipped.</p>
<p>Users cannot scroll to see the hidden content.</p>
</div>
</div>
</body>
</html>
A bordered container with no visible scrollbars. Content that extends beyond the container boundaries is clipped and hidden from view.
결론
CSS overflow을 사용하여 스크롤바 숨기기 속성은 더 깔끔한 인터페이스를 만듭니다. overflow: hidden을 사용하세요 스크롤 막대를 완전히 숨기거나 overflow-x을 사용하여 가로 및 세로 스크롤을 선택적으로 제어하려면 및 overflow-y 속성.
