銀河鉄道

【JavaScript】ウィンドウ幅で処理を変えるmatchMediaの使い方

サムネイル
matchMediaレスポンシブ対応

たとえば、スマホではスクロールアニメーションを停止したい、など。ウィンドウ幅を指定して処理をします。

matchMediaでウィンドウ幅を検知する

const mq = window.matchMedia('(min-width: ???px)');

// スクロールしたときに関数を呼び出す
window.addEventListener('scroll', () => {
	function mqCheck(mq) {
		// ビューポートの幅が 指定ピクセル以上の場合に実行する
		if (mq.matches) {
			// 呼び出す関数を記述
		}
	}
	mqCheck(mq);
});

window.matchMedia

指定された メディアクエリ文字列のパース結果を表す、新しい MediaQueryList オブジェクトを返します。

著者

author
月うさぎ

編集後記:
この記事の内容がベストではないかもしれません。