windowサイズによって処理を変更する方法のメモ・スニペットです。

Contents

  1. windowリサイズ時に実行する
  2. windowサイズやスクロール量を取得する
  3. windowサイズによって処理を変更する

windowリサイズ時に実行する方法

windowサイズが変更された時に何か処理を行いたい場合、下記のように記述すると思います。

$(window).on('resize', function() {
  // 処理を記述
});

上記の方法だと、windowサイズを変更している間はずっと処理が実行されることになります。リサイズ完了後のみ処理を実行したい場合は、setTimeoutを利用し、下記のように記述することで実装が可能となります。

var resizeTimer;

$(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
       // リサイズ完了後の処理
    }, 300);
});

windowサイズやスクロール量を取得する

windowサイズやスクロール量を確認したい時に使えるスニペットです。

$(window).on('load resize scroll', function() {
  var ww = window.innerWidth,
      wh = window.innerHeight,
      scroll = $(window).scrollTop();

  $('body').append('<div id="size"></div>');
  $('#size').html(
    'width: ' + ww + 'px' + // window width
    'height: ' + wh + 'px' + // window height
    'scroll: ' + scroll + 'px' // scrollTop
  ).css({
    position: 'fixed',
    right: '20px',
    bottom: '20px',
    padding: '10px',
    background: '#333',
    color: '#fff',
  }); 
});

windowサイズによって処理を変更する

windowサイズによって実行する処理を変更する方法です。他にも方法はいくつかあるかと思いますが、個人的によく使用しているものは以下の2つです。

.matchMedia()を使用する

CSSのメディアクエリのように条件分岐することができます。

if (window.matchMedia('max-width: 767px').matches) {
  // 767px 以下で実行したい処理
} else {
  // 768px 以上で実行したい処理
}

要素の有無やスタイルで判断する

CSSで767px以下では非表示に設定している要素があったとします。

@media screen and (max-width: 767px) {
  .pc-only {
    display: none; /* 767px以下では非表示 */
  }
}

上記の「.pc-only」が「display: none」の時を条件分岐とすることで、処理を分けることができます。

if ($('.pc-only').css('display') == 'none') {
   // 767px 以下で実行したい処理
} else {
  // 768px 以上で実行したい処理
}