關於betterscroll 默認向上滾動一段距離 解決方式

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章