【Javascript】画面を一定量スクロールされたら、ポップアップを表示したい

こんにちは！

今回は「Javascriptで画面を一定量スクロールされたら、ポップアップを表示する方法」についてお伝えしたいと思います。

ライブラリなどを使わず、独自のポップアップを表示したい場合に参考になるかと思います。

Contents

1 addEventListenerのscrollイベントを使って画面を一定量スクロールされたら、ポップアップを表示する
- - 1.0.1 HTML
  - 1.0.2 CSS
- 1.1 参考URL

addEventListenerのscrollイベントを使って画面を一定量スクロールされたら、ポップアップを表示する

具体例を用いて説明します。

以下のようなポップアップを実装していきます。

今回の要件は

スマホの場合はページ全体の１０％、PCの場合は５％をスクロールしたらポップアップを表示

ポップアップは一度だけ表示する

ポップアップはリンク付き画像と閉じるボタンだけのシンプルな作りにする

まずはHTMLファイルとCSSファイルでサンプルとなるデザインを作成します。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 一部省略  -->
  <link rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
  <div>
    こ<br>ん<br>に<br>ち<br>は<br>
    こ<br>ん<br>に<br>ち<br>は<br>
    こ<br>ん<br>に<br>ち<br>は<br>
    こ<br>ん<br>に<br>ち<br>は<br>
    こ<br>ん<br>に<br>ち<br>は<br>
    こ<br>ん<br>に<br>ち<br>は<br>
    こ<br>ん<br>に<br>ち<br>は<br>
    こ<br>ん<br>に<br>ち<br>は<br>
    こ<br>ん<br>に<br>ち<br>は<br>
    こ<br>ん<br>に<br>ち<br>は<br>
    こ<br>ん<br>に<br>ち<br>は<br>
    こ<br>ん<br>に<br>ち<br>は<br>
  </div>
  <div id="popup">
  <div class="popup-device">
    <div class="popup-overlay-bg"></div>
    <div class="popup-inner">
      <a href="https://skill-upupup-future.com/">
        <img id="mobile_image" src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/storesblog/20180206/20180206154755.jpg" alt="presentPC">
      </a>
      <span class="popup-close" onclick="closePopUp()"></span>
    </div>
  </div>
</div>
</body>
</html>

読み込んでいるCSSとJSのファイルパスは必要に応じて読み替えてください。

CSS

.popup-overlay-bg {
  background: rgb(0, 0, 0, .6);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999
}
.popup-inner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 500px;
  min-width: 280px;
  max-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  -webkit-animation: fadein .5s;
  -moz-animation: fadein .5s;
  -ms-animation: fadein 0.5s;
  -o-animation: fadein .5s;
  animation: fadein .5s
}
.popup-close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 29px;
  height: 29px;
  display: flex;
  border: 1px solid #fff;
  align-items: center;
  justify-content: center;
  background: #fff;
  cursor: pointer;
  border-radius: 50%;
  z-index: 999999;
}
.popup-close:after, .popup-close:before {
  width: 14px;
  height: 2px;
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  background: #667075
}
.popup-close:before {
  -ms-transform: rotate(-45deg);
  transform: rotateZ(-45deg)
}
.popup-close:after {
  -ms-transform: rotate(45deg);
  transform: rotateZ(45deg)
}
.popup-close {
  width: 23px;
  height: 23px
}
.popup-close:after, .popup-close:before {
  width: 11px;
  height: 2px;
  left: 6px;
  top: 9px
}
.popup-inner img {
  max-width: 100%;
  max-height: 500px;
  opacity: 1!important;
}
#popup {
  display: none;
}
/* アニメーション */
@keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
@-moz-keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
@-ms-keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
@-o-keyframes fadein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

ポップアップの表示が自然になるように、アニメーションでfadeinを付けています。
不要であれば外して大丈夫です。

また、width, heightなどのレイアウト系のCSSは表示する画像に合わせて調整をお願いしますm(__)m

最後にjsを実装していきます。

// ポップアップを一度表示したかどうか（画面更新されたらリセットされる）
let isOpenedPopup = false;
// ポップアップを閉じる
const closePopUp = () => {
  const popup = document.getElementById('popup');
  if (popup) {
    popup.style.display = 'none';
  }
};

// 画面読み込み後の処理
window.onload = () => {
  //body要素を取得
  const body = document.body;
  //表示位置を指定（スマホの場合はページ全体の１０％、PCの場合は５％をスクロールしたらポップアップを表示）
  const positionRate = window.innerWidth <= 480 ? 0.05 : 0.1; const position = body.clientHeight * positionRate; //スクロールされた場合の処理 window.addEventListener('scroll', () => {
      //ポップアップDOMを取得
      const popup = document.getElementById('popup');
      //スクロール位置を取得
      let scrollY = window.scrollY
      // スクロール量が表示位置以上にきた時にポップアップ表示
      if(popup && !isOpenedPopup && position < scrollY){
          popup.style.display = 'block';
          isOpenedPopup = true; // ポップアップを表示済
      }
  });
}

windows.onloadを使っている理由としては、
画面の縦横幅を取得する際に読み込み完了後でないと正しい値が取得できないためです。

参考URL

フリー画像サイト https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

以上、お疲れさまでした〜🍵