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();.

我会这样说：

这种方法应该是相当跨浏览器兼容的，但我真的不能对 IE6 做出任何保证——尤其是在 Quirksmode 中（<!doctype>在 html 文件中没有）。

于 2013-01-22T14:00:50.153 回答
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 回答
0

检查 screen.height 和 screen.width 并将其与元素的尺寸进行比较

于 2013-01-22T13:34:54.370 回答