关于betterscroll 默认向上滚动一段距离 解决方式

最近一直用betterscroll 来做页面的滚动 下拉刷新 上拉加载 等。也遇到一些很头疼的问题,今天先解决一个我实际遇到的问题

问题描述

下图是我未加better scroll之前的页面
关于betterscroll 默认向上滚动一段距离 解决方式
可以看出每一条顶上都会有10px的间距。而加上betterscroll之后。再看一下页面
关于betterscroll 默认向上滚动一段距离 解决方式
我的第一条10px的被吞掉了,直接从内容开始的。检查元素一看如下
关于betterscroll 默认向上滚动一段距离 解决方式
它给我向上移动了10px,这就有点费解了。

问题原因

再看一张图
关于betterscroll 默认向上滚动一段距离 解决方式
这是我用浏览器 添加visited后 查看的盒子大小,是不包括上部分的,这就是margin的锅
关于betterscroll 默认向上滚动一段距离 解决方式
betterscroll 默认会找到content 和wrpper的位置 让两个位置保持一致,如下图content 就是在该位置的。
关于betterscroll 默认向上滚动一段距离 解决方式

解决方法

知道问题原因就是margin 导致 content和内容不在同一高度,解决方案也就很简单
方法一:用border代替margin 这样内容的高度就撑开,使得content从内容位置开始
方法二:在开始添加一个1像素的盒子
<div style="height: 1px;margin-top: -1px"></div>
使得开始内容没有margin 盒子丢失高度