プログラミング

【プログラミング】JavaScriptでスクロール処理についてまとめる【初心者メモ】

【プログラミング】JavaScriptでスクロール処理についてまとめる【初心者メモ】

こんにちは

今回はJavaScriptでスクロールについて
調べたことをまとめていきます。

JavaScriptのスクロール処理を調べるといっぱい出てきて
初心者すぎてまったく理解できませんでした。
コピペでできるものもありましたが、
HTMLとCSSを完成させてからコピペだと
直さないといけないので、それだと面倒。

そういうこともあり、簡単にできる方法を探して、作ってみました。

いつもながら、自分のメモ程度&JavaScript初心者なので
間違えがあったり、もっと簡潔に書くことができると思います。

それではスクロールの処理についてみていきましょう。

JavaScriptでスクロール処理

500pxスクロールしたらリストが
固定されるものを作って見ました。

See the Pen
QWKpqpo
by 👓ならっち👓 (@naratch_)
on CodePen.

試しにスクロールしてみてください。
500pxのところまで来ると、リストを固定させて
500px以下になると元に戻ります。

解説をしていきます。

let ul = document.getElementById('fixed')
window.addEventListener('scroll', ()=> {
  const scrollY = window.pageYOffset;
  if (scrollY >= 500 ) {
    ul.classList.add('scroll-fixed');
  }else {
    ul.classList.remove('scroll-fixed');
  }
});

・let ul = document.getElementById(‘fixed’)

let 関数名①
関数の宣言をしています。

document.getElementById(‘ID’)
CSSのIDを取得していきます。

IDを取得して関数名①に保管しています。

・getElementByIdについては
【JavaScript入門】getElementByIdを完全理解する3つのコツ!
を参考にしてみてください。

・window.addEventListener(‘scroll’, ()=> {
const scrollY = window.pageYOffset;

window.addEventListener(‘scroll’, ()=> {
処理
}
スクロールした時にどういう処理をするか。

const 関数名②
関数の宣言をしています。

window.pageYOffset;
Y軸方向(垂直方向)のスクロール量を取得。

この処理はY軸方向のスクロール量を関数名②に保存しています。

window.addEventListenerについては
【JavaScript入門】addEventListener()によるイベント処理の使い方!
を参考にしてみてください。

・if (scrollY >= 500 ) {
ul.classList.add(‘scroll-fixed’);
}else {
ul.classList.remove(‘scroll-fixed’);
}

if (関数名② >= 500 )
Y軸方向のスクロール量が500より大きかったら処理を行う

関数名①.classList.add(‘クラス名’);
関数名①にクラスを追加する処理を行います。

else
ifの時以外の処理
今回の場合、Y軸方向のスクロール量が500より小さかったら処理を行う

関数名①.classList.remove(‘クラス名’);
関数名①にクラスを削除する処理を行います。

classListについては
【JavaScript】classListの使い方まとめ(add.remove.contains.toggle)
を参考にしてみてください。

ざっくりと各処理の役割解説でした。

コピペで使えるスクロール処理

lte 関数名① = document.getElementById(‘ID名‘)
window.addEventListener(‘scroll’, ()=> {
const 関数名② = window.pageYOffset;
if (関数名② >= 500 ) {
関数名①.classList.add(‘クラス名‘);
}else {
関数名①.classList.remove(‘クラス名‘);
}
});

関数名①関数名②ID名クラス名
を書き換えるだけで同じようにできると思います。
またif文の500を変更すればスクロール値も変更可能です。

まとめ

自分のメモ用にざっくりとした解説でした。

関数とDOM操作さえ知っていれば簡単に作れると思いますが
初心者にとってはそれさえも難しかったです。

自分用メモなのでわかりにくいところだらけだと思いますので
わからない場所は各自調べてください。

最後にコピペで使える
スクロール処理を書いたので活用してみてください。