检查元素的可见性

Question

我想检查一个元素是否可见，如果是，我想滚动到它那里。我正在尝试使用以下的 jQuery 来实现：

var j = jQuery.noConflict();

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

但是它没有起作用。

- user2539007

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以及其他设置中的visibility。例如，元素可能具有display:block:visibility:hidden这样的属性，这并不使它成为:visible。

- Brad Christie

Answer 2

尝试：

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

请参考此帖子：如何使用jQuery检查元素是否隐藏？

- Eirinn

Answer 3

使用 .is() 和 :visible

var j = jQuery.noConflict();

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

- Arun P Johny