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

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

问题描述

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

问题原因

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

解决方法

知道问题原因就是margin 导致 content和内容不在同一高度,解决方案也就很简单
方法一:用border代替margin 这样内容的高度就撑开,使得content从内容位置开始
方法二:在开始添加一个1像素的盒子


使得开始内容没有margin 盒子丢失高度

你可能感兴趣的:(better,scroll,css3)