Javascript 使用mootools确定DOM对象是否可见的最佳方法

确定DOM对象是否可见的最佳方法是什么

当对象被视为不可见时的各种情况：

显示：无

可见性：隐藏

父项之一具有“显示：无”或“可见性：隐藏”

另一个DOM元素遮挡了查询的元素（很好，但我可以管理） 没有它）

项目位于屏幕边界之外

被盗自：

被盗自：

---

因为它的mootools和它在mootools邮件列表中得到了处理，现在它将成为元素的一部分

/*
* Inspired from http://github.com/jeresig/sizzle/commit/7631f9c3f85e5fa72ac51532399cb593c2cdc71f
* and this http://github.com/jeresig/sizzle/commit/5716360040a440041da19823964f96d025ca734b
* and then http://dev.jquery.com/ticket/4512
*/

Element.implement({

  isHidden: function(){
    var w = this.offsetWidth, h = this.offsetHeight,
    force = (this.tagName === 'TR');
    return (w===0 && h===0 && !force) ? true : (w!==0 && h!==0 && !force) ? false : this.getStyle('display') === 'none';
  },

  isVisible: function(){
    return !this.isHidden();
  }

});

---

自从它的mootools和它在mootools邮件列表中得到处理，现在它将成为元素的一部分。快捷方式

/*
* Inspired from http://github.com/jeresig/sizzle/commit/7631f9c3f85e5fa72ac51532399cb593c2cdc71f
* and this http://github.com/jeresig/sizzle/commit/5716360040a440041da19823964f96d025ca734b
* and then http://dev.jquery.com/ticket/4512
*/

Element.implement({

  isHidden: function(){
    var w = this.offsetWidth, h = this.offsetHeight,
    force = (this.tagName === 'TR');
    return (w===0 && h===0 && !force) ? true : (w!==0 && h!==0 && !force) ? false : this.getStyle('display') === 'none';
  },

  isVisible: function(){
    return !this.isHidden();
  }

});

---

看起来上面给出的isVisible方法是在mootools more Element.Shortcuts中

但是，这两种方法都不能解释浏览器的滚动状态。下面的方法对于我来说似乎非常有效，可以满足原始问题中所述的要求#5

Element.implement({
isFullyVisible: function() {
    if(this.isVisible()) {
        var coord = this.getCoordinates(),
            winScroll = window.getScroll();

        return winScroll.y <= coord.top;
    } else {
        return false;
    }
}
});

Element.implement({
isFullyVisible:函数（）{
if（this.isVisible（））{
var coord=this.getCoordinates（），
winScroll=window.getScroll（）；
return winScroll.y看起来上面给出的isVisible方法在mootools more Element.Shortcuts中

但是，这两种方法都不能解释浏览器的滚动状态。下面的方法对于我来说似乎非常有效，可以满足原始问题中所述的要求#5

Element.implement({
isFullyVisible: function() {
    if(this.isVisible()) {
        var coord = this.getCoordinates(),
            winScroll = window.getScroll();

        return winScroll.y <= coord.top;
    } else {
        return false;
    }
}
});

Element.implement({
isFullyVisible:函数（）{
if（this.isVisible（））{
var coord=this.getCoordinates（），
winScroll=window.getScroll（）；
返回winScroll.y

功能可视性（obj）{
返回obj.offsetTop！=-1；
}
测试

功能可视性（obj）{
返回obj.offsetTop！=-1；
}
测试
/**
*检查图元及其父图元的显示和可见性
*@param-domel
*@param boolean isDeep Watch parents？默认值为true
*@return{Boolean}
*
*@作者Oleksandr Knyga
*/
功能可见（el、isDeep）{
var elIsVisible=真；
如果（“未定义”==isDeep的类型）{
isDeep=true；
}
elIsVisible=elIsVisible和el.offsetWidth>0和el.offsetWidth>0；
如果（isDeep&elIsVisible）{
while（'BODY'！=el.tagName&&elIsVisible）{
elIsVisible=elIsVisible&“hidden”！=window.getComputedStyle（el.visibility）；
el=el.parentElement；
}
}
返回elIsVisible；
}
/**
*检查图元及其父图元的显示和可见性
*@param-domel
*@param boolean isDeep Watch parents？默认值为true
*@return{Boolean}
*
*@作者Oleksandr Knyga
*/
功能可见（el、isDeep）{
var elIsVisible=真；
如果（“未定义”==isDeep的类型）{
isDeep=true；
}
elIsVisible=elIsVisible和el.offsetWidth>0和el.offsetWidth>0；
如果（isDeep&elIsVisible）{
while（'BODY'！=el.tagName&&elIsVisible）{
elIsVisible=elIsVisible&“hidden”！=window.getComputedStyle（el.visibility）；
el=el.parentElement；
}
}
返回elIsVisible；
}
Dimitar的解决方案不适合可见性为“隐藏”的元素

隐藏

元素框不可见（未绘制），但仍会像正常情况一样影响布局。

当父对象的可见性是“隐藏的”时，Luca的解决方案不能很好地工作，然而，子对象的可见性不是

隐藏

如果元素的子元素的可见性设置为可见，则它们将可见。元素无法接收焦点（例如在选项卡索引中导航时）

所以我混合了他们的答案：

function isDisplayed(obj){
    if (window.getComputedStyle(obj, '').visibility === 'hidden')
        return false
    var w = obj.offsetWidth
    var h = obj.offsetHeight
    var force = (this.tagName === 'TR')
    return ! ( (w===0 && h===0 && !force) ? true : (w!==0 && h!==0 && !force) ? false : window.getComputedStyle(obj, '').display  === 'none' )
}

但是，当元素是透明的时，它仍然不能很好地工作。
Dimitar的解决方案不能很好地处理可见性为“隐藏”的元素

隐藏

元素框不可见（未绘制），但仍会像正常情况一样影响布局。

当父对象的可见性是“隐藏的”时，Luca的解决方案不能很好地工作，然而，子对象的可见性不是

隐藏

如果元素的子元素的可见性设置为可见，则它们将可见。元素无法接收焦点（例如在选项卡索引中导航时）

所以我混合了他们的答案：

function isDisplayed(obj){
    if (window.getComputedStyle(obj, '').visibility === 'hidden')
        return false
    var w = obj.offsetWidth
    var h = obj.offsetHeight
    var force = (this.tagName === 'TR')
    return ! ( (w===0 && h===0 && !force) ? true : (w!==0 && h!==0 && !force) ? false : window.getComputedStyle(obj, '').display  === 'none' )
}

但是，当元素是透明的时，它仍然不能很好地工作。
类似的问题（非特定于框架）：确实如此。尽管下面的漂亮脚本没有出现在那里……类似的问题（非特定于框架）：确实如此。虽然下面的漂亮脚本没有出现在那里…但必须将第4点和第5点添加到此脚本中。必须将第4点和第5点添加到此脚本中。非常好。谢谢您。除非您滚动到元素上方，否则这似乎总是返回true。但是如果您位于页面顶部，并且页脚（例如）不可见，则会返回true仍然返回true.Perfect。谢谢。除非滚动元素，否则它似乎总是返回true。但是如果您位于页面顶部，并且页脚（例如）不可见，它仍然会返回true。