サイト制作やアプリ開発でスクロールに関するアニメーションはよく登場します。
初学者の方やWebデザイナーにとっては、なんだか難しく見えるかもしれません。
JavaScriptでスクロールを扱うには「位置」だけを考えておけば勝ったも同然ですので、スクロール位置に関する簡単な操作方法を紹介していきます。
また動画もあるので適時使ってください。
JavaScriptでスクロール位置を取得する方法
早速ですがJavaScriptでは以下のようにしてブラウザのスクロール位置を確認できます。
const w = window.scrollX;
const h = window.scrollY;
console.log(w); // 横方向のスクロール位置
console.log(h); // 縦方向のスクロール位置scroll関数というものがあり、水平方向と垂直方向ともに１行で取得できます。
JavaScriptでスクロール位置を操作する
続いてスクロールを操作する方法としては、以下のようにするだけです。
const w = window.scrollX;
const h = window.scrollY;
window.scrollTo(300,1500);scrollToという関数が用意されています。
引数は2つあって、「横方向の動かす量」「縦方向の動かす量」という形になっています。
実際には横方向へスクロールさせることはあまりないかと思います。
代表的なアニメーションとしては「トップに戻る」ボタンです。
縦長のサイトで下までスクロールしてから、特定のボタンをクリックすると自動で上に戻るものですね。
const w = window.scrollX;
const h = window.scrollY;
window.scrollTo(0,0); // ページの先頭に戻ることになるscrollToで引数を「0」にすることで「先頭に戻る」ことを意味することになります。
スクロールのスピードを少しゆっくりにしたいときはCSSで以下を指定してあげればOKです。
いわゆるスムーススクロールというやつです。
html{scroll-behavior: smooth;}アニメーションと聞くと数学を理解しておかないといけないように感じるかもしれませんが、大体の場合は専用の関数があるので誰でも簡単にアニメーションを作ることができるんですよね。
JavaScriptのスクロール量を計測する
最後にJavaScriptでスクロール量を計測するアニメーションを作ってみたいと思います。
ユーザーが上から下まで文章をスクロールし終わったら「同意しますか？」というチェックボックスを表示するものです。
Webアプリやスマホアプリでよくあるケースで、こちらは先ほど解説したスクロール量を測ることで実現できます。
HTMLは以下のように作って、チェックボックスの部分はCSSで非表示にしておきます。
<!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" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<p>
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認する
</p>
<br />
<p>
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認する
</p>
<br />
<p>
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認する
</p>
<br />
<p>
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認する
</p>
<br />
<p>
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認する
</p>
<br />
<p>
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認する
</p>
<br />
<p>
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認する
</p>
<br />
<p>
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認する
</p>
<br />
</div>
<div class="agree">同意しますか？<input type="checkbox" /></div>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.agree {
opacity: 0;
}続いてJavaScriptでスクロール量を測ります、縦方向のスクロールなのでscrollYを使用します。
const container = document.querySelector('.container');
window.addEventListener('scroll', () => {
const scrollVal = window.scrollY;
});「上から下までスクロールしたか？」という判定ですが、scrollYが現在のスクロール量なので文章の量と同じだけscrollYの値が増加したらOKということです。
そのため「スクロールできる残量がどれくらい残っているか？」を知る必要があります。
const container = document.querySelector('.container');
window.addEventListener('scroll', () => {
const scrollVal = window.scrollY;
// ここから追加
const windowH = window.innerHeight;
const containerH = container.scrollHeight;
const scrollable = containerH - windowH - 100;
});まずwindow.innerHeightで画面の高さが取得できます。
テキストの文量は事前に取得したcontainer要素のscrollHeightというプロパティを指定するとテキストの文量（高さ）を知ることができます。
あとはテキストの文量から画面の高さを差し引くとスクロールできる量が算出できます。
実務ではぴったりの量というより少し余裕を持たせることが多く、今回は最後に100pxだけ追加で差し引いています。
最後にscollYが計算した値と比べて大きいか小さいかを条件分岐で判定します。
const container = document.querySelector('.container');
window.addEventListener('scroll', () => {
const scrollVal = window.scrollY;
const windowH = window.innerHeight;
const containerH = container.scrollHeight;
const scrollable = containerH - windowH - 100;
// ここから追加
if (Math.ceil(scrollVal) >= Math.ceil(scrollable)) {
const agree = document.querySelector('.agree');
agree.style.opacity = 1;
}
});Math.ceilは数字に小数点が発生した際に整数に丸め込める効果があり使用しています。
条件分岐の内容としては現在のスクロール量がテキストの文量（スクロールできる残量）を超えたらCSSでチェックボックスを表示にする形です。
JavaScript側からもスタイルが変更、追加できるのですが初めての方は以下の記事で解説していますので併せてご覧ください。