JavaScriptで要素を動かす

2023年10月3日

JavaScript コーディングコピペ

JavaScript

Yasuko

yasuko

なんだかしんどいお年頃

jQueryを使わず、JavaScriptで動きをつけるとき。

いつもGoogle先生のお世話になってしまうのでコピペ用にここに記録しておきます。

スクロールしたらクラスを付与

//スクロールイベントリスナーに登録
window.addEventListener('scroll', myFuncfadeinquick, false);
const myFuncfadein = function () {
  //Classを追加する要素を取得
  const target = document.getElementsByClassName('js-fade');
  //Classを追加する位置を指定（ビューポート内）
  const position = Math.floor(window.innerHeight * .75); //ビューポート内の上から75%の位置を指定

  //要素の数だけループする
  for (let i = 0; i < target.length; i++) {

    //要素の上部座標を取得する（小数点切り捨て）
    let offsetTop = Math.floor(target[i].getBoundingClientRect().top);

    //要素の上部座標がpositionの位置を通過したら
    if (offsetTop < position) {
      //要素にClassを追加する
      target[i].classList.add('fade-in');
    }
  }
}
//スクロールイベントリスナーに登録
window.addEventListener('scroll', myFuncfadein, false);

追従ボタン

PCとSPの表示が違う時Ver

const myFuncBtn = function () {
  const target = document.getElementsByClassName('btn-area');
  const position = Math.floor(window.innerHeight * .5);

  for (let i = 0; i < target.length; i++) {

    let offsetTop = Math.floor(target[i].getBoundingClientRect().top);
    let offsetBottom = Math.floor(target[i].getBoundingClientRect().bottom);


    if (window.matchMedia("(max-width: 768px)").matches) {
        target[i].classList.add('is-active');
    } else if (window.matchMedia("(min-width:768px)").matches) {
  // 767px以上の処理
    if (offsetTop < position) {
      target[i].classList.add('is-active');
    }
    if (offsetBottom < 0) {
      target[i].classList.remove('is-active');
    }
    if (offsetBottom < position) {
      target[i].classList.remove('is-active');
    }
    if (offsetTop > position) {
      target[i].classList.remove('is-active');
    }
    }
  }
}
window.addEventListener('scroll', myFuncBtn, false);

要素を複製する

要素を取得して親要素の中に複製するVer

let element = document.querySelector(".slider__list").cloneNode(true);
document.querySelector(".slider__track").appendChild(element);

htmlには<div></div>の記述のみで中身に同じものを複数作りたいVer

let target = document.querySelectorAll('.dot_wrap');
for (let i in target) {
  if (target.hasOwnProperty(i)) {
    for (let div = 0; div < 20; div++) {
      const dot = document.createElement("div");
      dot.classList.add("dot");
      target[i].appendChild(dot);
    }
  }
};

リサイズしたときに処理をする

window.onresize = function(){
    var timeoutID = 0;
    var delay = 500;

    window.addEventListener("resize", function(){
        clearTimeout(timeoutID);
        timeoutID = setTimeout(function(){

            //処理したいこと
 
        }, delay);
    }, false);
};

すべて読み込んだら処理をする

window.addEventListener('load', function () {
  console.log("load：ファイルを全て読み込みました。");
  
  //処理したいこと

});

スムーズスクロール

const jsSmoothScroll = document.querySelectorAll('a[href^="#"]');
 for (let i = 0; i < jsSmoothScroll.length; i++){
  jsSmoothScroll[i].addEventListener('click', (e) => {
    e.preventDefault();
    let href = jsSmoothScroll[i].getAttribute('href');
    let target = document.getElementById(href.replace('#', ''));
    const rect = target.getBoundingClientRect().top;
    const offset = window.pageYOffset;
    const position = rect + offset;
    window.scrollTo({
      top: position,
      behavior: 'smooth',
    });
  });
}

jQueryバージョンはこちらの記事で。

リロードしたときにスクロール位置を保持する

var positionY; 
var STORAGE_KEY = "scrollY";

function checkOffset() {
  positionY = window.pageYOffset;
  localStorage.setItem(STORAGE_KEY, positionY);
  console.log(positionY);
}

window.addEventListener("load", function () {
  positionY = localStorage.getItem(STORAGE_KEY);

  if (positionY !== null) {
    scrollTo(0, positionY);
  }

  window.addEventListener("scroll", checkOffset, false);

});