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

2020年12月15日2024年2月24日

【プログラミング】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)
を参考にしてみてください。

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

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

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