반응형

▼ 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>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
    <h2>Logo</h2>
    <ul class="menus">
      <li class="menu">menu-1</li>
      <li class="menu">menu-2</li>
      <li class="menu">menu-3</li>
      <li class="menu">menu-4</li>
    </ul>
  </div>
  <div id="content">
    <h1 class="title">
      What is Lorem Ipsum?
    </h1>
    <div class="text">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
      when an unknown printer took a galley of type and scrambled it to make a type 
      specimen book. It has survived not only five centuries, 
      but also the leap into electronic typesetting, remaining essentially unchanged. 
      It was popularised in the 1960s with the release of Letraset sheets containing 
      Lorem Ipsum passages, and more recently with desktop publishing software like
      Aldus PageMaker including versions of Lorem Ipsum. 
      Contrary to popular belief, Lorem Ipsum is not simply random text. 
      It has roots in a piece of classical Latin literature from 45 BC, making it 
      over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney 
      College in Virginia, looked up one of the more obscure Latin words,
      consectetur, from a Lorem Ipsum passage, and going through the cites of the word 
      in classical literature, discovered the undoubtable source. Lorem Ipsum comes from
      sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" 
      (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a 
      treatise on the theory of ethics, very popular during the Renaissance. 
      The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", 
      comes from a line in section 1.10.32.
      The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. 
      Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced 
      in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
    </div>
  </div>
  <div id="to-top">
    ▲Top
  </div>
  <script src="index.js"></script>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 80px 30px;
}

#nav {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px;
  background-color: #ffffff;
  transition-duration: 0.3s;
}

.menus {
  display: flex;
}

.menu {
  margin-right: 20px;
  list-style: none;
}

#content {
  width: 400px;
  padding: 20px 30px;
  border-radius: 10px;
  box-shadow: 2px 2px 10px #babecc;
}

.title {
  margin: 10px 0 15px;
}

#to-top {
  position: fixed;
  right: 50px;
  bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fefefe;
  box-shadow: 2px 2px 10px #bfbfbf;
  visibility: hidden;
  opacity: 0;
  transition-duration: 0.3s;
  cursor: pointer;
}

.shadow {
  box-shadow: 2px 2px 10px #bfbfbf;
}

#to-top.show {
  visibility: visible;
  opacity: 1;
}

.lift-up {
  transition-property: transform;
  transform: translateY(-70px);
  transition-duration: 1.5s;
}

웹 페이지를 이용하다 보면 다양한 상황에서 스크롤바를 접하게되는데

CSS를 통해서 의도적으로 스크롤이 있는 요소를 만들지 않는 이상

일반적으로 웹 문서의 크기가 브라우저의 창 크기보다 클 때 자연스럽게 나타난다.

 

스크롤 이벤트는 아래와 같이 브라우저를 대변하는 윈도우 객체의 이벤트 핸들러를 등록한다.

// Scroll 이벤트
function printEvent(e) {
  console.log(e);
}

window.addEventListener("scroll", printEvent);

실행해보면 아래와 같이 웹 문서가 스크롤 될 때 이벤트 핸들러가 동작하는 것을 확인할 수 있다.

스크롤 이벤트를 활용할 때 일반적으로 윈도우 객체의 프로퍼티가 많이 활용된다고 했을 때,

'window.scrollY' 프로퍼티를 활용하면 스크롤이 발생했을 때

웹 문서의 제일 위쪽에서부터 몇 픽셀 만큼 스크롤 했는지를 파악할 수 있다.

// Scroll 이벤트
function printEvent(e) {
  console.log(e);
  console.log(window.scrollY);
}

window.addEventListener("scroll", printEvent);

또한 어떤 특정한 기준을 가지고서 DOM 요소를 다룰 수 도 있다.

// Scroll 이벤트
function printEvent(e) {
  const standard = 30;

  const nav = document.querySelector("#nav");
  const toTop = document.querySelector("#to-top");

  if (window.scrollY > standard) {
    // 만약 스크롤 30px을 넘을 떄
    nav.classList.add("shadow"); // nav요소 노드에 shadow 클래스 적용
    toTop.classList.add("show"); // toTop요소 노드에 show 클래스 적용
  } else {
    // 스크롤이 30px을 넘지 않을 때
    nav.classList.remove("shadow"); // nav요소 노드에 shadow 클래스 삭제
    toTop.classList.remove("show"); // toTop요소 노드에 show 클래스 삭제
  }
}

window.addEventListener("scroll", printEvent);

scrollY 프로퍼티를 이용해서 프로퍼티 값이 기준값 이상이면

각 요소에 어떤 클래스를 추가하고, 그렇지 않으면 클래스를 제거하는 방식으로 적용했을 때,

실행해보면 30px 이상 스크롤 했을 때

nav와 toTop 요소 노드에 각각 shadow와 show 클래스가 추가되어

메뉴바에 그림자가 생기고 top 버튼이 생기는 것을 확인할 수 있다.

혹은 함수 밖에서 변수를 하나 만들고

직전에 스크롤 이벤트의 scrollY 프로퍼티 값을 담는 조건문을 추가하여

이 값으로 스크롤의 방향을 감지하는데 활용할 수 있다.

// Scroll 이벤트

let lastScrollY = 0;

function printEvent(e) {
  console.log(window.scrollY);

  const standard = 30;

  const nav = document.querySelector("#nav");
  const toTop = document.querySelector("#to-top");

  if (window.scrollY > standard) {
    // 만약 스크롤 30px을 넘을 떄
    nav.classList.add("shadow"); // nav요소 노드에 shadow 클래스 적용
    toTop.classList.add("show"); // toTop요소 노드에 show 클래스 적용
  } else {
    // 스크롤이 30px을 넘지 않을 때
    nav.classList.remove("shadow"); // nav요소 노드에 shadow 클래스 삭제
    toTop.classList.remove("show"); // toTop요소 노드에 show 클래스 삭제
  }

  if (window.scrollY > lastScrollY) {
    // 스크롤 방향이 아래쪽일 때
    nav.classList.add("lift-up");
  } else {
    //스크롤 방향이 위쪽일 떄
    nav.classList.remove("lift-up");
  }

  lastScrollY = window.scrollY; // 마지막 스크롤 y의 위치를 다시 재할당
}

window.addEventListener("scroll", printEvent);

이렇게 스크롤을 내리는 상황에서 메뉴바가 올라가고

스크롤을 올리는 상황에서는 다시 내려오는 효과를 적용할 수 있다.

스크롤 이벤트는 이러한 간단한 작업 뿐만아니라 

다양한 DOM 프로퍼티와 CSS를 활용하면 여러가지 스크롤 애니메이션도 제작할 수 있다.

▼GitHub

https://github.com/SeopE9611/JavaScript_soloPlay/tree/main/interactive_JS/24.%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%9D%B4%EB%B2%A4%ED%8A%B8

 

JavaScript_soloPlay/interactive_JS/24.스크롤이벤트 at main · SeopE9611/JavaScript_soloPlay

Contribute to SeopE9611/JavaScript_soloPlay development by creating an account on GitHub.

github.com

 

반응형

'JS' 카테고리의 다른 글

(2) Modern JavaScript - Typeof 연산자 (복습)  (0) 2024.11.20
(1) Modern JavaScript - 데이터 타입의 특징과 종류  (0) 2024.11.19
(21) Interactive JavaScript (Event) - input 태그  (0) 2024.11.15
(20) Interactive JavaScript (Event) - 키보드 이벤트  (0) 2024.11.14
(19) Interactive JavaScript (Event) - 마우스 이동 이벤트  (0) 2024.11.13

티스토리툴바