web-dev-qa-db-ja.com

要素の可視性を確認する

要素が表示されているかどうかを確認し、表示されている場合は、その要素までスクロールします。私は次のjqueryでそれを達成しようとしています：

var j = jQuery.noConflict();

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

しかし、それは機能しません。

jqueryif-statementscrollto
37
user2539007
// 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にはなりません。

11
Brad Christie

試してください：

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

この投稿を参照してください： 要素がjQueryで非表示になっているかどうかを確認するにはどうすればよいですか？

10
Eirinn

。is（） および ：visible を使用します

var j = jQuery.noConflict();

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