要素の可視性の確認

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'に対してのみテストすることはできません。の設定に加えて、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?