8

わかりました、これは本当に簡単だと思っていましたが、そうではありませんでした。HTML/CSSで何かを台無しにしているだけだと思いますが、ここに行きます。

次のような基本的なページがあります。

HTML

<!DOCTYPE html>
<html>
  <head>
    <link href='test2.css' rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="test2.js"></script>
  </head>
  <body>
    <div id="scroll"></div>
  </body>
</html>

test2.css

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
  width: 100%;
}

#scroll {
  height: 100%;
  width: 100%;
  overflow: scroll;
  background-color: black;
}

test2.js

$(document).ready(function() {
  // my resolution is 1440x900
  alert('innerwidth should be 1425');
  // all of these return 1440
  alert('body innerwidth: ' + $('body').innerWidth());
  alert('document width: ' + $(document).width());
  alert('window width: ' + $(window).width());
  alert('scroll div innerwidth: ' + $('#scroll').innerWidth());
  alert('document.documentElement.clientWidth: ' + document.documentElement.clientWidth);
  alert('document.documentElement.scrollWidth: ' + document.documentElement.scrollWidth);
});

だから私はページに1つの要素を持っています...画面全体を占めるdiv、またはスクロールバーを除いた画面全体を占めるべきです。現在、スクロールバーなしでページの幅と高さを取得する方法についてスヌーピングを行ってきましたが、残念ながら、適切な値を返すものはありません...これは、HTMLにボートが欠けていると信じさせますまたはCSS。

私は以下を見ました：

jquery - スクロールバーなしで画面幅を取得する方法は?

スクロールバーなしでブラウザウィンドウのサイズを取得する方法

したがって、表示可能な画面の値からそれぞれのスクロールバーの値を引いた値を返すメソッドが必要です...したがって、スクロールバーの幅は15ピクセルであるため、幅の値は1425である必要があります。それがinnerWidthの仕事だと思っていたのですが、どうやら間違っているのでしょうか？

誰でも洞察を提供できますか？(私は Firefox 24 を実行しています。)

編集

背景を追加するために、空白のページがあります。このページに要素を 1 つずつ追加します。これらの要素のサイズを計算するときは、ページの幅を使用する必要があります。最終的に、このページはスクロールバーが表示されるまで拡大します。そのため、スクロールバーを最初からそこに強制しようとしていますが、どうやら、それでも何もしません。

EDIT2

さらに興味深いことがあります... を実行するdocument.getElementById('scroll').clientWidthと、適切な innerWidth が得られますが、$('#scroll').width()orを実行する$('#scroll').innerWidth()と、両方とも最大解像度が返されます... jQuery のバグのように聞こえます。

4

4 に答える 4

2

非常にハックな解決策を発見しました...これをtest2.jsのアラートの前に追加すると、適切な幅が得られます:

var p = $('body').append('<p style="height: 100%; width: 100%;"></p>');
alert(p.width());
$('body').remove('p');

その結果、すべてのアラートが適切な幅になりました。overflow-yこのようにすれば、CSSも必要ありません。なぜこれで解決するのか不思議...

本当の答えは、HTML と CSS をそのままにして、document.getElementById('scroll').clientWidth. clientWidth を使用すると、表示可能領域からスクロールバーの幅を引いた値が取得されます。

于 2013-10-04T04:43:44.653 に答える