jQuery - スクロールバーも入れて幅検知する

GitHub Edit Page
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。

背景

レスポンシブさせるときにサブカラムの幅は維持してメインカラムの幅を縮めようとしたかった。そしてある幅になったらカラム落ちさせて 1 カラムにさせる。

やりたいこととして、リサイズ&ロードさせて、全体分の幅からサブカラム+横の margin 分を引いた値をメインカラムの幅にする計算をした。

自分の環境では問題なく動いてたのだが、他の環境ではサブカラムが下に崩れてしまう状態が出た。

原因

全体の幅をレスポンスする時にスクロールバーの部分を加味していなかった。

つまり 1 カラム落ちさせるタイミングの時、スクロールバー幅分だけズレて表示されてしまうみたい。

全体の幅を取るために以下のように設定してた。

var Width = $(window).outerWidth();

これだと表示されているエリアのみの取得になるらしい

対応策

以下のように変更・動作させるように変更

$(window).on('load resize', function () {
  var $contents = $('#contents');
  var $main = $('#main');
  var $sub = $('#sub');
  var sWindow =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;

  if (sWindow < 1200 && sWindow >= 1001) {
    var allWidth = $main.parent().outerWidth();
    var mainWidth = $main.outerWidth();
    var w = allWidth - 254;
    // 254はサブカラム+横margin分
    $main.css('width', w);
  } else if (sWindow >= 1200) {
    $main.css('width', '966');
  } else {
    $main.css('width', '100%');
  }
});

勉強になりました。

javascript jQuery スクロールバーの幅を含むウィンドウサイズを取得したい。 - かもメモ

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
アーカイブ一覧へ戻る