SeouliteLab

jQuery .scroll() 메서드: 스크롤 이벤트 처리하기 본문

카테고리 없음

jQuery .scroll() 메서드: 스크롤 이벤트 처리하기

Seoulite Lab 2024. 4. 4. 09:07

예제 1: 페이지 상단에서 아래로 스크롤할 때 메시지 표시

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery .scroll() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
          $("#scrollMessage").text("스크롤을 내립니다.");
        } else {
          $("#scrollMessage").text("");
        }
      });
    });
  </script>
  <style>
    body {
      height: 2000px; /* 스크롤이 발생할 정도의 높이 설정 */
    }
    #scrollMessage {
      position: fixed;
      top: 10px;
      left: 10px;
      background-color: lightblue;
      padding: 10px;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div id="scrollMessage"></div>
</body>
</html>

설명: 이 예제는 페이지를 스크롤할 때 스크롤 위치를 감지하여 페이지 상단에서 아래로 스크롤할 때 메시지를 표시합니다.

예제 2: 스크롤 이벤트로 요소 이동하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery .scroll() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(window).scroll(function(){
        if ($(this).scrollTop() > 500) {
          $("#floatingBox").css("top", "100px");
        } else {
          $("#floatingBox").css("top", "10px");
        }
      });
    });
  </script>
  <style>
    body {
      height: 2000px; /* 스크롤이 발생할 정도의 높이 설정 */
    }
    #floatingBox {
      position: fixed;
      top: 10px;
      left: 10px;
      width: 100px;
      height: 100px;
      background-color: lightblue;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div id="floatingBox"></div>
</body>
</html>

설명: 이 예제는 페이지를 스크롤할 때 요소를 동적으로 이동시킵니다.

예제 3: 스크롤 이벤트 해제하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery .scroll() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      var scrollHandler = function() {
        console.log("스크롤 중...");
      };

      $(window).scroll(scrollHandler);

      $("#unbindButton").click(function(){
        $(window).off("scroll", scrollHandler);
        console.log("스크롤 이벤트 핸들러가 해제되었습니다.");
      });
    });
  </script>
</head>
<body>
  <button id="unbindButton">스크롤 이벤트 핸들러 해제</button>
</body>
</html>

설명: 이 예제는 스크롤 이벤트 핸들러를 등록하고, 버튼을 클릭하여 해당 핸들러를 해제하는 방법을 보여줍니다.

예제 4: 스크롤 이벤트로 배경 색상 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery .scroll() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
          $("body").css("background-color", "lightgray");
        } else {
          $("body").css("background-color", "white");
        }
      });
    });
  </script>
  <style>
    body {
      height: 2000px; /* 스크롤이 발생할 정도의 높이 설정 */
      transition: background-color 0.5s;
    }
  </style>
</head>
<body>
  <p>내용 내용 내용 내용...</p>
</body>
</html>

설명: 이 예제는 페이지를 스크롤할 때 배경 색상을 변경합니다.

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