gwooden_코린이

자바스크립트 스크롤 이벤트 (약관동의 체크박스 및 상태바 만들기) 본문

프론트엔드/자바스크립트

자바스크립트 스크롤 이벤트 (약관동의 체크박스 및 상태바 만들기)

gwooden22 2022. 12. 29. 10:54
728x90

1. 스크롤(scroll) 이벤트

회원가입

약관동의 관련 이벤트

 

- HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="box">
      회원약관<br>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam vel ullam sit iste repellendus quis dolorum tempore commodi itaque nisi! Consectetur, aliquam atque! Veritatis atque qui aut nesciunt rerum dignissimos?
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam vel ullam sit iste repellendus quis dolorum tempore commodi itaque nisi! Consectetur, aliquam atque! Veritatis atque qui aut nesciunt rerum dignissimos?
    </div>
    <input id="chk" type="checkbox" disabled><label for="chk">약관에 동의합니다.</label>
  </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>

 

 

- CSS

.box {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  overflow: scroll;
  margin: auto;
}

.container {
  text-align: center;
}

#chk:disabled + label {
  color: lightgray;
}

 

 

- JS

let box = document.querySelector('.box');

//.scrollHeight 전체 영역안에 있는 총높이 확인 (내용에 따라 길이 달라짐)
// console.log(box.scrollHeight);

// .clientHeight 박스 내부 영역안에 있는 총높이 확인
// console.log(box.clientHeight);


let boxHeight = box.scrollHeight - box.clientHeight -5;

let isDisable = true;

box.addEventListener('scroll', function() {

  //.scrollTo 위에서 부터 아래까지 얼마나 스크롤을 했는지 보여준다.
  // console.log(box.scrollTop);

  //총높이 -5 <= box 창의 높이 + 이동거리
  //총높이 - 창의 높이 -5 <= 이동거리

  // == 이것보다는 오차범위를 염두에 둔다면 <= 이런 방식이 좋다.
  //환경에 따라서 오차가 존재하다 보니 여유값도 필요하다

  if(isDisable && (box.scrollTop >= boxHeight)) {

    // alert('다읽음'); 확인용

    document.querySelector('#chk').disabled = false;

    //한번 동작 후 false로 변경하면서 if문에서 isDisable이 만족을 못하여 알림창은 한번만 실행된다.
    isDisable = false;
  }

});

See the Pen Untitled by gwooden22 (@gwooden22) on CodePen.

2. 스크롤 상태바 만들기

  • 브라우저 창의 높이
    • window.innerHeight
  • 웹페이지의 전체 높이
    • document.querySelector('body').clientHeight
  • 스크롤 할때마다 스크롤한 만큼의 높이(스크롤할때마다 바뀜)
    • -> 전체에서 스크롤을 얼마만큼 내린지 %로 계산할 수 있음 
    • window.innerHeight
 

막대기 너비를 스크롤한만큼 늘어나야 함(처음은 너비가 0)

(px단위 보다는 %단위가 좋다.)

 

- HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- 상태바  -->
  <div class="status-bar">

  </div>

  <!-- 약관동의 -->
  <div class="container">
    <div class="box">
      회원약관<br>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam vel ullam sit iste repellendus quis dolorum tempore commodi itaque nisi! Consectetur, aliquam atque! Veritatis atque qui aut nesciunt rerum dignissimos?
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam vel ullam sit iste repellendus quis dolorum tempore commodi itaque nisi! Consectetur, aliquam atque! Veritatis atque qui aut nesciunt rerum dignissimos?
    </div>
    <input id="chk" type="checkbox" disabled><label for="chk">약관에 동의합니다.</label>
  </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
    <script src="script_Scroll_agree.js"></script>
    <script src="script_Scroll_Indicator.js"></script>
</body>
</html>

 

 

- JS (상태바에 대한 스크립트 추가 생성 후 작업)

// 브라우저 창 높이 확인 
// console.log(window.innerHeight);

// 브라우저 <body>태그 영역 총 높이 확인
// console.log(document.querySelector('body').clientHeight);

// 저장용변수 = 전체 높이 - 브라우저 창의 높이
let brScrHei = document.querySelector('body').clientHeight - window.innerHeight;


//윈도우에 관련된 이벤트
window.addEventListener('scroll', function() {

  //스크롤 한만큼 높이
  // console.log(window.scrollY);

  // 스크롤 한만큼의 높이 / (전체 높이 - 브라우저 창의 높이) * 100
  // console.log(window.scrollY / brScrHei * 100);

  let tolHei = window.scrollY / brScrHei * 100;

  //잦망 코드 수정 필요 ㅋㅋ
 document.querySelector('.status-bar').style.width = `${tolHei}%`;


});

See the Pen Untitled by gwooden22 (@gwooden22) on CodePen.

728x90
저작자표시 비영리 변경금지

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

자바스크립트 open API 사용해보기  (0) 2022.12.29
자바스크립트 정규식 (Regular Expression)  (0) 2022.12.29
자바스크립트 카운트 다운 알림창 만들기  (0) 2022.12.28
자바스크립트 캐러셀(carousel)  (0) 2022.12.28
자바스크립트 DATASET  (1) 2022.12.28
'프론트엔드/자바스크립트' Related Articles more
Comments