尺寸, 滚动监听

by yakun chen

HTML

<div id="aDiv">  
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p id="target">hi target </p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  <p>hi</p>
  
</div>
<br>
<input type="button" value="Show scrollHeight"
       onclick="alert(document.getElementById('aDiv').scrollHeight);">
       
<input type="button" value="Show clientHeight"
       onclick="alert(document.getElementById('aDiv').clientHeight);">
       
<input type="button" value="Show offsetHeight"
       onclick="alert(document.getElementById('aDiv').offsetHeight);">

<br><br>
<input type="button" value="Show scrollTop"
       onclick="alert(document.getElementById('aDiv').scrollTop);">
<input type="button" value="Show target offsetTop"
       onclick="alert(document.getElementById('target').offsetTop);">

CSS

#aDiv {
  width: 100px; 
  height: 200px; 
  overflow: auto;
  border:1px solid red;
  margin: 5px;
}