jqueryを使用したスクロールされたコンテンツの高さ

Question

divのオーバーフローがautoに設定されています。上にスクロールされ、jQueryを使用して表示されないdiv部分の高さを取得するにはどうすればよいですか。また、どのようにdivの可視部分の高さを得ることができます。

$(window).scroll(function() { 

     // calculate the percentage the user has scrolled down the page 
     var scrollwin = $(window).scrollTop(); 
     var scrollArticle = $('.main').scrollTop(); 
     var articleheight = $('.main').outerHeight(true); 
     var windowWidth = $(window).width(); 
     if (scrollwin >= $('.main').offset().top) { 
      if (scrollwin <= ($('.main').offset().top + articleheight)) { 
//I want this percentage to be calculated on current visible portion of div plus above scrolled portion that is not visible. ScrollArticle is giving 0 value. 
       $('.bar-long').css('width', ((scrollArticle + $(window).height())/articleheight) * 100 + "%"); 
      } else { 
       $('.bar-long').css('width', "100%"); 
      } 
     } else { 
      $('.bar-long').css('width',($(window).height()/articleheight) * 100 + "%"); 
     } 


    }); 

Answer 1

要素のプロパティscrollTop()を使用します。それは要素の絶対的な上から目に見える上までの高さです。