CSS를 사용하여 스크롤바를 감추면서 스크롤 기능을 유지하려면, overflow: hidden을 사용하여 스크롤바를 감추고, JavaScript나 CSS를 사용하여 스크롤 이벤트를 적절하게 처리해야 합니다.
아래는 간단한 HTML, CSS, JavaScript를 사용한 예시입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hidden Scrollbar</title>
<style>
body {
margin: 0;
overflow: hidden; /* 스크롤바 감춤 */
}
.content {
height: 200%;
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
<!-- 여기에 콘텐츠 추가 -->
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// 스크롤 이벤트 처리
document.addEventListener("scroll", function() {
// 여기에 스크롤 이벤트에 대한 동작 추가
// 예: console.log("스크롤 중");
});
});
</script>
</body>
</html>반응형
이 예시에서는 <style> 태그 안에서 body 요소에 overflow: hidden; 속성을 적용하여 스크롤바를 감추었습니다. 그리고 <script> 태그에서는 scroll 이벤트를 감지하여 스크롤 이벤트에 대한 동작을 추가할 수 있습니다.
실제로 감추고자 하는 콘텐츠나 레이아웃에 맞게 코드를 수정하여 사용하시면 됩니다.
반응형
'IT > CSS' 카테고리의 다른 글
| css 레이어 사용방법 (0) | 2024.01.08 |
|---|---|
| CSS 들여 쓰기 (0) | 2024.01.08 |
| CSS 자동 줄바꿈하는 방법 (0) | 2024.01.07 |
| CSS 줄바꿈 하는 방법 (0) | 2024.01.06 |
| CSS Flexbox 개념과 속성 (0) | 2024.01.06 |