【JavaScript】ウィンドウ幅で処理を変えるmatchMediaの使い方
記事更新日: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
編集後記:
この記事の内容がベストではないかもしれません。