最近一直用betterscroll 来做页面的滚动 下拉刷新 上拉加载 等。也遇到一些很头疼的问题,今天先解决一个我实际遇到的问题
问题描述
下图是我未加better scroll之前的页面
可以看出每一条顶上都会有10px的间距。而加上betterscroll之后。再看一下页面
我的第一条10px的被吞掉了,直接从内容开始的。检查元素一看如下
它给我向上移动了10px,这就有点费解了。
问题原因
再看一张图
这是我用浏览器 添加visited后 查看的盒子大小,是不包括上部分的,这就是margin的锅
betterscroll 默认会找到content 和wrpper的位置 让两个位置保持一致,如下图content 就是在该位置的。
解决方法
知道问题原因就是margin 导致 content和内容不在同一高度,解决方案也就很简单
方法一:用border代替margin 这样内容的高度就撑开,使得content从内容位置开始
方法二:在开始添加一个1像素的盒子
<div style="height: 1px;margin-top: -1px"></div>
使得开始内容没有margin 盒子丢失高度