关于jquery:检查元素的可见性

Checking visibility of an element

本问题已经有最佳答案，请猛点这里访问。

我想检查一个元素是否可见，如果是，我想向下滚动到它。我正试图通过以下jquery实现这一点：

1
2
3
4
5
6
7

var j = jQuery.noConflict();

jQuery(document).ready(function($) {
if(j('#element').css('display') == 'block'){
j('body').scrollTo('#target');
};
});

但它不起作用。

尝试：

1	if($(element).is(":visible"))

参考本文：如何检查jquery中是否隐藏了元素？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// jQuery no conflict mode
var j = $.noConflict();

// retain meaning of jQuery's handle (optional but makes it
// sometimes easier if you don't use one-letter assignments
// of jQuery)
(function($){

// document read
$(function(){
// if element is visible (a visible #element was found)
if $('#element:visible').size() > 0){
// scroll to #target
$('body').scrollTo('#target');
}
});

})(j);

:visible使它更容易。你不能只针对display=='block'进行测试，除了检查visibility设置之外，你还必须测试inline-block和其他设置。例如，元素可以有display:block:visibility:hidden，这不会使它成为:visible。

使用.is()和：可见

1
2
3
4
5
6
7

var j = jQuery.noConflict();

jQuery(function($) {
if($('#element').is(':visible')){
$('body').scrollTo('#target');
};
});