728x90
300x250
하단이 뿌옇게 처리된 상하 스크롤
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 100vh; /* body 높이를 전체 뷰포트 높이로 설정 */
overflow: hidden; /* 복수의 스크롤바가 나타나지 않도록 body의 오버플로우 감춤 */
}
#scrollable-list {
height: calc(100% - 50px); /* bottom-blur의 높이를 뺀 부분으로 scrollable-list의 높이 설정 */
overflow-y: auto;
border-bottom: 10px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.list-item {
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.list-item a {
text-decoration: none;
color: inherit;
}
#scrollable-list::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
z-index: 1;
}
</style>
</head>
<body>
<div id="scrollable-list">
<div class="list-item"><a href="#">리스트 아이템 1</a></div>
<div class="list-item"><a href="#">리스트 아이템 2</a></div>
<div class="list-item"><a href="#">리스트 아이템 3</a></div>
<div class="list-item"><a href="#">리스트 아이템 4</a></div>
<div class="list-item"><a href="#">리스트 아이템 5</a></div>
<div class="list-item"><a href="#">리스트 아이템 6</a></div>
<div class="list-item"><a href="#">리스트 아이템 7</a></div>
</div>
</body>
</html>
#scrollable-list::after 가상 요소를 사용해서 하단 뿌옇게 처리된 배경을 만들었다.
그런데 여기서 문제는 맨마지막 리스트가 가상 요소 영역에 가려서 클릭이 안된다는 것이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 100vh; /* body 높이를 전체 뷰포트 높이로 설정 */
overflow: hidden; /* 복수의 스크롤바가 나타나지 않도록 body의 오버플로우 감춤 */
}
#scrollable-list {
height: calc(100% - 50px); /* bottom-blur의 높이를 뺀 부분으로 scrollable-list의 높이 설정 */
overflow-y: auto;
border-bottom: 10px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.list-item {
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.list-item a {
text-decoration: none;
color: inherit;
}
#scrollable-list::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
z-index: 1;
pointer-events: none; /* 마우스 이벤트를 가로막지 않도록 함 */
}
</style>
</head>
<body>
<div id="scrollable-list">
<div class="list-item"><a href="#">리스트 아이템 1</a></div>
<div class="list-item"><a href="#">리스트 아이템 2</a></div>
<div class="list-item"><a href="#">리스트 아이템 3</a></div>
<div class="list-item"><a href="#">리스트 아이템 4</a></div>
<div class="list-item"><a href="#">리스트 아이템 5</a></div>
<div class="list-item"><a href="#">리스트 아이템 6</a></div>
<div class="list-item"><a href="#">리스트 아이템 7</a></div>
</div>
</body>
</html>
pointer-events: none; 해당 요소에 마우스 이벤트를 비활성화하는 스타일을 가상요소에 적용하면 해당 가상 요소 위에서 마우스 이벤트가 발생하지 않아 마우스 클릭 등의 이벤트가 아래의 실제 리스트 아이템에 전달될 수 있게 된다.
pointer-events: none; 이벤트를 적용하지 않으면 해당 가상 요소가 마우스 이벤트를 캡처해서 실제 리스트 아이템을 가리게 된다. 그러나 pointer-events: none;를 적용하면 가상 요소는 마우스 이벤트를 캡처하지 않게 되고 실제 리스트 아이템에 마우스 클릭 등의 이벤트가 전달될수 있게 된다.
728x90
반응형
'Front-end > CSS' 카테고리의 다른 글
| 마진 병합 : 인접 요소 마진이 함께 적용되는 문제 해결 (0) | 2024.07.10 |
|---|---|
| @supports 최신 브라우저에만 스타일 적용하기 (1) | 2024.01.06 |
| 컨텐츠 너비에 따라 박스 크기 조정 width:min-content (0) | 2023.11.18 |
| 체크박스 클릭시 검정색 border 생기는 현상 해결방법 (0) | 2023.06.02 |
| 스크롤 모양 변경하기 (0) | 2023.05.01 |
댓글