前言
很久没有在简书上写blog，都在github上写了，看有点时间就搬运一下
margin-top出现溢出也不是什么新鲜事了，老生常谈，我也不是第一次见到了，但是以前经常会以各种理由安慰自己（比如赶进度）会投机取巧使用padding-top来代替。过后也没有去找解决溢出的方法，甚至，一度认为是无法解决的，想想以前面试，就让人羞红脸，万恶的面试官。
什么是margin溢出
我也不多解析，正好在碰到时我也事先截图了，一目了然：
-
先上一张容器的图（灰色背景即为容器的区域）
image
-
然后看最上面一个item
image
红框部分即为item的大小，而橙色的部分即为溢出的部分
问题
其实如果是平时简单布局做样式，这么点高度也无伤大雅，说不定做出来产品页不会有感知，或者向我以往做的那样，可以用padding-top补回这部分溢出。
但是，在做底部上拉加载更多（还没有想到其他场景）的时候，就会出现问题。
要实现这功能，一般是使用scroll事件，然后监听，scrollTop, 容器的高度：clientHeight, 产生滚轴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>
然后，通过判断是否到达底部然后出发加载更多逻辑
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的高度由于首个item有部分溢出，那么body的高度就会少了一部分。那么就算将滚轴拉倒底部，scrollTop和containerHeight的总高度总是比bodyHeight的高度要小。换言之，滚轴还没有到达底部就会触发加载更多的逻辑。当然是还是可以使用给body添加padding-top补全margin-top溢出部分，然而有代码洁癖的你会愿意一直如此屈服？
那么关于怎么清除margin的溢出就提上日程。
清除溢出
上面说那么多废话，其实消除溢出很简单，简单得比清除浮动还要简单[捂脸]，然后我之前竟然不知道。
很简单！
很简单！
很简单！
重要的事说三遍
ul.body{
border: 1px solid transparent;
// or
border-top: 1px solid transparent;
}
就是这么简单……
-
这是为加border前的
ul.body：
image
-
这是加了border后的
ul.body
image
小结
俗话说：路走多了，路边出来了；坑遇多了，经验便来了[捂脸]
网友评论