DOM内の.scroll（）関数と.find（セレクタ）を使用してjquery位置にオフセットを追加する

Question

次のコードを使用してDOM内のテキストエリアにスクロールし、カーソルをフォーカスします。それはうまく動作します。

$(document).on('click', '.test-comment', function() { 
    if (obj_test.u != '0') { 
     var commentsform = $(this); 
     if (!commentsform.hasClass('disabled')) { 
      commentsform.addClass('disabled'); 
     } else { 
      commentsform.removeClass('disabled'); 
     } 

     $(this).closest('#post-' + $(this).data('post_id')).find('#masonry-meta-commentform-' + $(this).data('post_id')).scroll(function() { 
      if ($('#post-masonry #masonry').length) { 
       $('#post-masonry #masonry').masonry('reloadItems').masonry('layout'); 
      } else if ($('#masonry').length) { 
       $('#masonry').masonry('reloadItems').masonry('layout'); 
      } 
     }).find('textarea').focus(); 

     return false; 
    } else { 
    // do something 

     return false; 
    } 
}); 

。

ただし、次の画像のようになります。ご覧のように、デスクトップウィンドウの下部にテキストエリアが表示されます。

（例えば100pxに）私のコードにさらにオフセットをスクロールするように設定する方法はありますか？だから、次の画像のように見えて、フォーカス機能を維持しますか？それとも他のアイデア？

Answer 1

あなたは、まずoffset().topを使用してテキストエリアの上部を取得し、この中に追加することで、テキストエリアの高さを一番上にスクロールする権利を計算する（ので、このの全体がビューにスクロールされる）と、いくつかのことができます余分な距離（例えば、30）も、その下にボタンを含める必要がある場合。

$(document).on('click', '.test-comment', function() { 
if (obj_test.u != '0') { 
    var commentsform = $(this); 
    if (!commentsform.hasClass('disabled')) { 
     commentsform.addClass('disabled'); 
    } else { 
     commentsform.removeClass('disabled'); 
    } 

    $(this).closest('#post-' + $(this).data('post_id')).find('#masonry-meta-commentform-' + $(this).data('post_id')).scroll(function() { 
     if ($('#post-masonry #masonry').length) { 
      $('#post-masonry #masonry').masonry('reloadItems').masonry('layout'); 
     } else if ($('#masonry').length) { 
      $('#masonry').masonry('reloadItems').masonry('layout'); 
     } 
    });// 

    // HERE COMES YOUR SCROLLING CODE 
    var $targetTextArea = $(this).closest('#post-' + $(this).data('post_id')).find('#masonry-meta-commentform-' + $(this).data('post_id')).find('textarea'); 
    var textAreaTop = $targetTextArea.offset().top; 
    var textAreaHeight = $targetTextArea.height(); 
    var scrollHeight = textAreaTop + textAreaHeight + 30; // added 30 to also include the submit button below the text area 
    $("html, body").animate({"scrollTop": scrollHeight}, 500, function(){ 
     $targetTextArea.focus(); 
    });//animate() 




    return false; 
} else { 
// do something 

    return false; 
} 

}）;