最近一直用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 盒子丟失高度