今天玩 antd-mobile 碰到一個滾動條的問題：在 Tab 組件中使用多個 ListView ，當(dāng)操作第一個 Tab 中的 ListView A 組件藐守，加載數(shù)據(jù)，滾動，底部加載一切正常酵紫，可是當(dāng)我點(diǎn)擊切換到第二個 Tab 中的 ListView B 組件時，發(fā)現(xiàn)在 ListView B 組件中滾動屏幕，觸發(fā)了 ListView A 組件中的滾動事件奖地，同樣的橄唬，在 ListView A 組件中滾動屏幕，也會觸發(fā) ListView 組件的滾動事件参歹。
導(dǎo)致這個奇葩問題的原因居然是兩個 ListView 公用了 body 的 scroll仰楚，解決思路就是讓兩個 ListView 視同自己的 scroll 事件，同時設(shè)置 body 的 overflow: hidden犬庇。
反思了下對 css僧界、js、html 的滾動相關(guān)操作的技能太淺臭挽，特別整理了這篇筆記捂襟。
Css 屬性 overflow
設(shè)置內(nèi)容溢出顯示狀態(tài)
div
{
width:150px;
height:150px;
overflow:scroll;
}
設(shè)置div內(nèi)容溢出時顯示滾動條
可能的值
| 值 | 描述 |
|---|---|
| visible | 默認(rèn)值。內(nèi)容不會被修剪埋哟，會呈現(xiàn)在元素框之外。 |
| hidden | 內(nèi)容會被修剪郎汪，并且其余內(nèi)容是不可見的赤赊。 |
| scroll | 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容煞赢。 |
| auto | 如果內(nèi)容被修剪抛计，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值照筑。 |
Js 監(jiān)聽滾動事件
window.addEventListener('scroll', this.handleScroll); // 添加滾動事件
window.removeEventListener('scroll', this.handleScroll); // 刪除滾動事件
handleScroll: function (e) {
console.log('瀏覽器滾動事件')
}
Js 獲取與滾輪與頂部距離小技巧
各瀏覽器下 scrollTop的差異 IE6/7/8：
- 對于沒有doctype聲明的頁面里可以使用 document.body.scrollTop 來獲取 scrollTop高度 吹截；
- 對于有doctype聲明的頁面則可以使用 document.documentElement.scrollTop； Safari:
- safari 比較特別凝危，有自己獲取scrollTop的函數(shù) ： window.pageYOffset 波俄； Firefox:
- 火狐等等相對標(biāo)準(zhǔn)些的瀏覽器就省心多了，直接用 document.documentElement.scrollTop 蛾默；
chrome 不認(rèn)識 document.documentElement.scrollTop
如果有文檔聲明（即網(wǎng)頁第一句的docType）的情況下懦铺，標(biāo)準(zhǔn)瀏覽器是只認(rèn)識 documentElement.scrollTop 的，但chrome雖然我感覺比firefox還標(biāo)準(zhǔn)支鸡，但卻不認(rèn)識這個冬念，在有文檔聲明時，chrome也只認(rèn)識document.body.scrollTop.
由于在不同情況下牧挣，document.body.scrollTop與document.documentElement.scrollTop都有可能取不到值
document.body.scrollTop與document.documentElement.scrollTop兩者有個特點(diǎn)急前，就是同時只會有一個值生效。比如document.body.scrollTop能取到值的時候瀑构，document.documentElement.scrollTop就會始終為0裆针；反之亦然。所以，如果要得到網(wǎng)頁的真正的scrollTop值
// 方法一
var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;
// 方法二
var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
// 方法三
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || 0;
這樣就可以解決距離頂部的問題据块。
Js 判斷滾動到底部
判斷滾動條到底部码邻，需要用到DOM的三個屬性值，即scrollTop另假、clientHeight像屋、scrollHeight。
-
scrollTop為滾動條在Y軸上的滾動距離边篮。 -
clientHeight為內(nèi)容可視區(qū)域的高度己莺。 -
scrollHeight為內(nèi)容可視區(qū)域的高度加上溢出（滾動）的距離。
從這個三個屬性的介紹就可以看出來戈轿，滾動條到底部的條件即為scrollTop + clientHeight == scrollHeight
//滾動條在Y軸上的滾動距離
function getScrollTop(){
return scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
}
//文檔的總高度
function getScrollHeight(){
return scrollHeight = document.body.scrollHeight + document.documentElement.scrollHeight;
}
//瀏覽器視口的高度
function getWindowHeight(){
return document.compatMode == "CSS1Compat" ? windowHeight = document.documentElement.clientHeight : windowHeight = document.body.clientHeight;
}
window.onscroll = function(){
if(getScrollTop() + getWindowHeight() == getScrollHeight()){
alert("you are in the bottom!");
}
};
帶動笑的滾動
使用 Jquery 實(shí)現(xiàn)
$('div').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});
Js 滾動相關(guān)API
- 網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;
- 網(wǎng)頁可見區(qū)域高： document.body.clientHeight;
- 網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth; (包括邊線的寬)
- 網(wǎng)頁可見區(qū)域高： document.body.offsetHeight; (包括邊線的寬)
- 網(wǎng)頁正文全文寬： document.body.scrollWidth;
- 網(wǎng)頁正文全文高： document.body.scrollHeight;
- 網(wǎng)頁被卷去的高： document.body.scrollTop; （當(dāng)前滾動條距離頂部的距離）
- 網(wǎng)頁被卷去的左： document.body.scrollLeft;（當(dāng)前滾動條距離左邊的距離）
- 網(wǎng)頁正文部分上： window.screenTop;
- 網(wǎng)頁正文部分左： window.screenLeft;
- 屏幕分辨率的高： window.screen.height;
- 屏幕分辨率的寬： window.screen.width;
- 屏幕可用工作區(qū)高度： window.screen.availHeight;
- 屏幕可用工作區(qū)寬度：window.screen.availWidth;
- scrollHeight: 獲取對象的滾動高度凌受。
- scrollLeft:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離
- scrollTop:設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離
- scrollWidth:獲取對象的滾動寬度
- offsetHeight:獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度
- offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計算左側(cè)位置
- offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標(biāo)的計算頂端位置
- event.clientX 相對文檔的水平座標(biāo)
- event.clientY 相對文檔的垂直座標(biāo)
- event.offsetX 相對容器的水平坐標(biāo)
- event.offsetY 相對容器的垂直坐標(biāo)
- document.documentElement.scrollTop 垂直方向滾動的值
- event.clientX+document.documentElement.scrollTop 相對文檔的水平座標(biāo)+垂直方向滾動的量
- 要獲取當(dāng)前頁面的滾動條縱坐標(biāo)位置，用：
- document.documentElement.scrollTop;
- 而不是：
- document.body.scrollTop;
- documentElement 對應(yīng)的是 html 標(biāo)簽思杯，而 body 對應(yīng)的是 body 標(biāo)簽
拓展
-
JS滾輪事件(mousewheel/DOMMouseScroll)了解
- 一張較全的IE7, IE10, Chrome, 以及FireFox胜蛉，鼠標(biāo)向下滾動圖表
- 講解了
DOMMouseScroll、onmousewheel的差異 - 兼容的滾輪事件方法
- 簡單的實(shí)例
