728x90
728x90
화면에 팝업이 열렸을 때 스크롤을 막는 기능을 알아보겠습니다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body { height: 3000px; background: #ddd; }
.scrollLock { overflow: hidden; }
.popup {
height: 3000px;
width: 500px;
}
.popup_div {
width: 90%;
background: blue;
color : #ffffff;
font-size: 20px;
line-height : 300px;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="popup">
<div class="popup_div">
<p>POPUP</p>
</div>
</div>
</body>
</html>
간단한 예제입니다!
팝업이 열려있다는 가정하에 만든 예제 화면입니다.
팝업이 열렸다는 가정하에 스크롤이 움직이는게 보이시죠
이럴 때 간단하게 스크롤 막는 방법이 있습니다.
body { overflow: hidden; }
이걸 < body > 에 넣어주시면 되는데요!
body에 height가 지정되어있어도 스크롤이 생기지 않는답니다!
728x90
728x90
'CSS' 카테고리의 다른 글
| 알림 활성화 / 비활성화 타원형 버튼 만들기 (1) | 2024.02.22 |
|---|---|
| user-select 텍스트 선택 효과 지우기 (1) | 2024.02.22 |
| position absolute 를 이용하여 화면 가운데 정렬하기! (0) | 2023.01.16 |
| Input tag에 [숫자]만 입력하고 싶을 때 Tip! (1) | 2023.01.14 |
댓글