檢查元素的可見性

Question

我想檢查一個元素是否可見，如果是，我想向下滾動。我試圖用下面的jQuery來實現：

var j = jQuery.noConflict(); 

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

但它不起作用。

Answer 1

// 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。

Answer 2

使用.is()和:visible

var j = jQuery.noConflict(); 

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

Answer 3

嘗試：

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

參考這個帖子：How do I check if an element is hidden in jQuery?