最近在用node.js做一款聊天室的時候，網上查資料發現一行js代碼，不是很清楚是干嘛的，就來搞一搞。
1 _displayNewMsg: function(user, msg, color){ 2 var container = document.getElementById('historyMsg'), 3 msgToDisplay = document.createElement('p'), 4 date = new Date().toTimeString().substr(0,8); 5 msgToDisplay.style.color = color || '#000'; 6 msgToDisplay.innerHTML = user + '<span class = "timespan">(' + date + '):</span>' + msg; 7 container.appendChild(msgToDisplay); 8 container.scrollTop = container.scrollHeight; 9 }
container.scrollTop = container.scrollHeight; ？？？
前面的代碼的作用是將聊天室發送的信息顯示到消息框里邊，猜想container.scrollTop = container.scrollHeight 總是優先顯示消息框的最后一條消息。
百度了一下scrollTop和scrollHeight的意思，大概就是scrollTop表示 “卷” 起來的高度值，what？什么是卷起來？表示很懵逼。
寫了一段代碼了解一下什么是 “卷” 起來？
//樣式 <style type="text/css"> #container{ width:200px; height:100px; overflow:hidden; border:1px solid black; } #container div { width:180px; height:240px; border:1px solid black; } </style> //這段代碼主要是一個固定寬度高度的div內部包含一個同樣固定高度寬度的div且高度大於外部div，添加overflow：hidden，將內部div溢出來的部分給隱藏掉 <body> <div id="container"> <div> <span>111111111111111111</span> <span>222222222222222222</span> <span>333333333333333333</span> <span>444444444444444444</span> <span>555555555555555555</span> <span>666666666666666666</span> <span>777777777777777777</span> <span>888888888888888888</span> <span>999999999999999999</span> <span>101010101010101010</span> <span>121212121212121212</span> <span>11111111111111111</span> <span>11111111111111111</span> </div> </div> <script type="text/javascript"> var container = document.getElementById("container"); container.scrollTop = container.scrollHeight; </script> </body>
結果是醬子的：
有的同學可能不知道沒有 container.scrollTop = container.scrollHeight; 是怎么樣的？ 下圖：
對比一下發現，“卷” 起來的意思是，將內部div的內容向上移動的高度值。
那么，scrollHight 呢？
在網上找到一個關於這些值的圖片，下圖：
ScrollHeight其實是網頁內容的實際高度。
那么，現在可以知道 container.scrollTop = container.scrollHeight 的意思了，就是每次有新消息時，消息框總是顯示最下方的消息，將之前的消息 ‘卷’ 上去，因為scrollHeight是整個消息框的實際高度，scrollTop卷上去的高度值，必然足夠使其到達底部，看到最新一條消息。
看到這里，還想做個實驗，就是scrollTop卷到底步之后，是繼續向上卷，還是到達底部就不能再卷上去呢？
將container.scrollTop 的值設置為10000，結果是這樣的
說明scrollTop只能卷到底部。
試完 scrollHeight，接着試一下 clientHeight 和 offsetHight ，兩者解釋有點微妙，附上參考的博客 http://blog.csdn.net/fswan/article/details/17238933；
將 scrollHeight 換成 clientHeight 或 offsetHeight 之后，內部 div 向上卷的高度都減少了。
在谷歌，IE，Opera 三種瀏覽器下的高度都略有差別。
