divの本当の底を見つけるには？

Question

codepenスクロールが表示されるようにcodepenのサイズを変更する必要があります。私はコンテンツの内部スクロールについて話しています。

私はスクロールがdiv要素の一番下にあるかどうかを知りたいです。私はこれがページのために終わったのを見た。 divの下にスクロールすると、scrollHeightが私に210を与える一方で、scrollTopは95を示します。本当の底はどうやって見つかりますか？

var scroller = $('.fill-area-content'); 

var getHeight = function() { 
    //console.log(scroller.scrollTop()); 
    console.log('IsAtBottom: ', isAtBottom(scroller)); 
} 

var isAtBottom = function(scroller) { 
    var atBottom = false; 
    var asRawDom = scroller.get(0); 

    console.log('scroll height', asRawDom.scrollHeight); 
    console.log(asRawDom.scrollTop); 
    //scrollHeight is 210 while Bottom is 95 
    //How do I determine true bottom? 

    return atBottom; 
} 

//Stuff I've messed with 
/* 
console.log(scroller.height()); 
    console.log($(document).height()); 
    console.log($(window).height()); 
    var testHeight = $(document).height() -  $(window).height(); 
    console.log(testHeight); 
*/ 

<input type="button" onclick="getHeight()" value="Get Height"/> 
<div class="flexbox-container"> 
    <div class="flexbox-item header"> 
     Header 
    </div> 

    <div class="flexbox-item flexbox-inner-container flexbox-item-grow"> 
     <div class="flexbox-item-grow fill-area-content"> 
      Content 
      <br /><br /> 
      Emulates height 100% with a horizontal flexbox with stretch 
      <br /><br />  
      This box with a border should fill the blue area except for the padding (just to show the middle flexbox item). Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
     </div> 
    </div> 

    <div class="flexbox-item footer"> 
     Footer 
    </div> 
</div> 

.flexbox-container 
{ 
    //width: 100%; 
    height: 100%; 

    display: flex; 
    flex-direction: column; 

    justify-content: flex-start; /* align items in Main Axis */ 
    align-items: stretch; /* align items in Cross Axis */ 
    align-content: stretch; /* Extra space in Cross Axis */ 

    background: rgba(255, 255, 255, .1); 
} 

.flexbox-inner-container 
{ 
    display: flex; 
    flex-direction: row; 

    justify-content: flex-start; /* flex-start is the default. align items in Main Axis */ 
    align-items: stretch; /* stretch is default. align items in Cross Axis */ 
    align-content: stretch; /* stretch is default. Extra space in Cross Axis */ 
} 

.flexbox-item-grow 
{ 
    flex: 1; /* same as flex: 1 1 auto; */ 
} 

.fill-area-content 
{ 
    overflow: auto; 
} 

//Fluff below here 
*, *:before, *:after 
{ 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 


html, body 
{ 
    width: 100%; 
    height: 100%; 

    margin: 0; 
    padding: 0; 
} 

.flexbox-item 
{ 
    padding: 8px; 
} 

.flexbox-item.header 
{ 
    background: rgba(255, 0, 0, .1); 
} 
.flexbox-item.footer 
{ 
    background: rgba(0, 255, 0, .1); 
} 
.flexbox-item. 
{ 
    background: rgba(0, 0, 255, .1); 
} 


body 
{ 
    background: #444444; 

    color: #cccccc; 
    font-size: 14px; 

    font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 

} 

Answer 1

scrollTopの最大値（したがって、あなたはスクロール要素の下に移動したかどうかを判断するために計算する必要があるもの）scrollHeightなり、マイナス要素の高さ - あなたが何を記述すると、私は要素が115px背の高いと仮定します。ここでは作業例です：

$('#foo').scroll(function() { 
 
    var maxScrollTop = $(this).prop('scrollHeight') - $(this).height(); 
 
    if ($(this).scrollTop() == maxScrollTop) { 
 
    console.log('scrolled to bottom!'); 
 
    } 
 
});

#foo { 
 
    height: 100px; 
 
    overflow: scroll; 
 
} 
 
#content { 
 
    height: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="foo"> 
 
    <div id="content">Scroll down!</div> 
 
</div>