【JavaScript】ウィンドウ幅で処理を変えるmatchMediaの使い方
作成日:2022-09-24
更新日:2022-09-24

たとえば、スマホではスクロールアニメーションを停止したい、など。ウィンドウ幅を指定して処理をします。
matchMediaでウィンドウ幅を検知する
const mq = window.matchMedia('(min-width: ???px)');
// スクロールしたときに関数を呼び出す
window.addEventListener('scroll', () => {
	function mqCheck(mq) {
		// ビューポートの幅が 指定ピクセル以上の場合に実行する
		if (mq.matches) {
			// 呼び出す関数を記述
		}
	}
	mqCheck(mq);
});
window.matchMedia
指定された メディアクエリ文字列のパース結果を表す、新しい MediaQueryList オブジェクトを返します。
参考にしたサイト
      
    
2022-09-24
      編集後記:
      この記事の内容がベストではないかもしれません。