检查元素的可见性[重复]

Posted 2023-02-21

【中文标题】检查元素的可见性[重复]

【英文标题】：Checking visibility of an element [duplicate]

【发布时间】：2013-06-28 14:14:38

【问题描述】：

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

var j = jQuery.noConflict();

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

但它不起作用。

【参考方案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。

【参考方案2】：

试试：

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

参考这个帖子：How do I check if an element is hidden in jQuery?

【参考方案3】：

使用.is() 和:visible

var j = jQuery.noConflict();

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