엘리먼트의 가시성 확인하기

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() 및

var j = jQuery.noConflict(); 

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

Answer 3

:visible 시도 :

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

이 게시물을 참조하십시오 How do I check if an element is hidden in jQuery?