检查元素的可见性

时间:2013-07-01 12:44:59

标签: jquery if-statement scrollto

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

var j = jQuery.noConflict();

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

但它不起作用。

3 个答案:

答案 0 :(得分:10)

尝试:

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

请参阅此帖:How do I check if an element is hidden in jQuery?

答案 1 :(得分:9)

// 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设置之外,您还必须测试visibility和其他人。例如,该元素可能包含display:block:visibility:hidden :visible

答案 2 :(得分:3)

使用.is():visible

var j = jQuery.noConflict();

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