3

ブラウザのビューポートの幅を取得することについて話している投稿をたくさん見てきましたが、水平スクロールバーを避けるのに十分な幅がある場合、本質的にブラウザのビューポートの幅を見つけたいと思っています。

私は Prototype JS フレームワークを使用しており、それを使用して純粋な JavaScript を使用してさまざまなオプションを見てきました。例えば：

  • $(document.body).getWidth()document.body.clientWidthマージンを除いたビューポートの幅を返します。
  • document.documentElement.clientWidthwindow.innerWidthマージンを含むビューポートの幅を返します。

私もこっそりしようとしました: 左端の位置を取得する意図で、既知の幅の DIV をページの右端 (つまり CSS right:0) に対して絶対配置しましたが、実際には右端に揃えられます。 -ビューポートの端。

私が見つけた唯一の動作は、JavaScript を使用して、スクロールしなくなるまで右にスクロールすることです (scrollBy(1000000, 0)通常は単純に使用するだけで十分ですが、while ループの方が明らかに信頼性が高くなります)。次に、水平スクロール オフセットを取得して追加します。それをビューポートの幅に。しかし、ウィンドウをスクロールしたくありません。どうにかして調べたいのです。

少なくともjQueryの提案であっても、jQueryがどのようにそれを行うかを見ることができます。

document.body.scrollWidthこれが機能しないことを示す簡単な例を次に示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body onload="document.getElementById('sw').innerHTML = document.body.scrollWidth">
<p><code>document.body.scrollWidth</code> = <span id="sw"></span></p>
<div style="position:absolute;left:0;bottom:0;width:1980px;background-color:#ccc;padding:10px;">This DIV is 2000px wide including padding.</div>
</body>
</html>

この出力は、幅が 2000px であることを示しているはずです。これは、ページの最も広い部分の幅だからです。そうではありません。

4

3 に答える 3

0

幅の場合：

document.body.scrollWidth

高さの場合：

document.body.scrollHeight

position:relative編集：IEの場合、bodyタグを指定する必要があります

于 2013-03-19T12:48:59.443 に答える
0

どうですか

window.screen.width;

document.body.style.width = (window.screen.width - 15) + 'px';

window.screen.width - 15水平スクロールバーを避けるには十分です。15垂直スクロールバーの幅です。

于 2013-03-19T12:27:31.853 に答える
0

ブラウザーは、html と body を通常の要素のように扱いません。特に、多くのブラウザーは、body 要素の scrollWidth などの処理方法に関して、非常にバグがあります。唯一の本当の解決策は、すべてのコンテンツをページ全体の 1 つの巨大な div にラップし、それを使用することです。div は通常の要素であるため、body と html の奇妙な動作を引き起こすバグの影響を受けません。

于 2013-04-26T13:28:37.063 に答える