0

やあみんな私は将来作成される要素の絶対的な位置を持っています。要素が現在のビューポートに完全に表示されるかどうかを確認したいと思います。要素がページにレンダリングされていれば使用できることはわかってgetBoundingClientRectいますが、そうではなく、できませんでした。指定された絶対座標（左、上、下、右）が現在のビューポートに表示されるかどうかを検出する方法はありますか？前もって感謝します。

編集：

これまでの私の解決策-要素を挿入しvisibility: hiddenて使用getBoundingClientRectします。もっと良い方法があるかどうか疑問に思っていました。

4

3 に答える 3

1

このレンダリングされていない要素の絶対座標がある場合（つまり、JS変数からプルしたり、どこかから読み取ったり、ハードコーディングしたり<style>、ページ上のタグから読み取るスクリプトを記述したりすることができます... ）、次に次のようなことを行うことができます：

var viewport = {
    x : 0,
    y : 0,
    width : 0,
    height : 0,
    update : function () {
        this.x = document.body.scrollLeft || document.documentElement.scrollLeft;
        this.y = document.body.scrollTop  || document.documentElement.scrollTop;
        this.width  = document.documentElement.clientWidth;
        this.height = document.documentElement.clientHeight;
    }
};

これで、要素のx、y、width、heightとビューポートのx、y、width、heightの交差を確認できるようになります。

ユーザーがスクロールするときはいつでも、を押すだけviewport.update();です。

私はこれを言います：

このメソッドは<!doctype>かなりクロスブラウザー互換である必要がありますが、IE6に関しては、特にQuirksmode（ htmlファイルにはありません）に関しては、実際には何の保証もできません。

于 2013-01-22T14:00:50.153 に答える
0

screen.heightとscreen.widthを確認し、要素の寸法と比較します

于 2013-01-22T13:34:54.370 に答える
0

これをチェックしてください：https ：//stackoverflow.com/a/1823700/1060487

function alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );
}
于 2013-01-22T13:57:16.493 に答える