前言
很久沒有在簡書上寫blog椅挣，都在github上寫了逗扒，看有點(diǎn)時(shí)間就搬運(yùn)一下
margin-top出現(xiàn)溢出也不是什么新鮮事了，老生常談掰盘，我也不是第一次見到了摄悯，但是以前經(jīng)常會以各種理由安慰自己（比如趕進(jìn)度）會投機(jī)取巧使用padding-top來代替。過后也沒有去找解決溢出的方法愧捕，甚至奢驯，一度認(rèn)為是無法解決的，想想以前面試次绘，就讓人羞紅臉瘪阁，萬惡的面試官撒遣。
什么是margin溢出
我也不多解析，正好在碰到時(shí)我也事先截圖了管跺，一目了然：
-
先上一張容器的圖（灰色背景即為容器的區(qū)域）
image -
然后看最上面一個(gè)item
image
紅框部分即為item的大小义黎，而橙色的部分即為溢出的部分
問題
其實(shí)如果是平時(shí)簡單布局做樣式，這么點(diǎn)高度也無傷大雅豁跑，說不定做出來產(chǎn)品頁不會有感知廉涕，或者向我以往做的那樣，可以用padding-top補(bǔ)回這部分溢出艇拍。
但是狐蜕，在做底部上拉加載更多（還沒有想到其他場景）的時(shí)候，就會出現(xiàn)問題淑倾。
要實(shí)現(xiàn)這功能馏鹤，一般是使用scroll事件，然后監(jiān)聽娇哆，scrollTop, 容器的高度：clientHeight, 產(chǎn)生滾軸body的高度：clientHeight
<div id="container">
<ul class="body">
<li class="item">item_0</li>
<li class="item">item_1</li>
<li class="item">item_2</li>
...
<li class="item">item_n</li>
</ul>
</div>
然后湃累，通過判斷是否到達(dá)底部然后出發(fā)加載更多邏輯
document.querySelector('#container').
addEventListener('scroll', function(e) {
const container = this;
const body = container.querySelector('ul.body');
const scrollTop = container.scrollTop;
const containerHeight = container.clientHeight;
const bodyHeight = body.clientHeight;
const isBottom = scrollTop + containerHeight >= bodyHeight;
isBottom && !function(){
// load more logic
}();
}, false);
由于溢出，你可知道碍讨，body的高度由于首個(gè)item有部分溢出治力，那么body的高度就會少了一部分。那么就算將滾軸拉倒底部勃黍，scrollTop和containerHeight的總高度總是比bodyHeight的高度要小宵统。換言之，滾軸還沒有到達(dá)底部就會觸發(fā)加載更多的邏輯覆获。當(dāng)然是還是可以使用給body添加padding-top補(bǔ)全margin-top溢出部分马澈，然而有代碼潔癖的你會愿意一直如此屈服？
那么關(guān)于怎么清除margin的溢出就提上日程弄息。
清除溢出
上面說那么多廢話痊班，其實(shí)消除溢出很簡單，簡單得比清除浮動(dòng)還要簡單[捂臉]摹量，然后我之前竟然不知道涤伐。
很簡單！
很簡單缨称！
很簡單凝果！
重要的事說三遍
ul.body{
border: 1px solid transparent;
// or
border-top: 1px solid transparent;
}
就是這么簡單……
-
這是為加border前的
ul.body：
image -
這是加了border后的
ul.body
image
小結(jié)
俗話說：路走多了，路邊出來了睦尽；坑遇多了器净，經(jīng)驗(yàn)便來了[捂臉]
