本文自出“阿敏其人”技術(shù)博客，轉(zhuǎn)載請取得本人同意。
文：阿敏其人
一大脉、scroll團隊成員
scroll，滾動水孩，一般討論的是網(wǎng)頁整體與瀏覽器之間的關(guān)系镰矿。
瀏覽器的的寬高是固定的，但是頁面的一般高度都遠遠大于瀏覽器的高度俘种，有時候?qū)挾纫矔笥跒g覽器的寬度秤标。
Js中有一些系列的方法scroll的方法和屬性。
打開經(jīng)典的W3c宙刘，看一下Dom Element對象關(guān)于scroll的屬性苍姜。
| 屬性/方法 | 解釋 |
|---|---|
| element.scrollHeight | 返回元素的整體高度。 |
| element.scrollWidth | 返回元素的整體寬度悬包。 |
| element.scrollLeft | 返回元素左邊緣與視圖之間的距離衙猪。 |
| element.scrollTop | 返回元素上邊緣與視圖之間的距離。 |
這四個屬性布近，全部是只讀屬性垫释。
其中，無非就是分為寬高和左上撑瞧。
兩個方向棵譬。
image.png
準備工作
想要研究頁面滾動時，頁面和瀏覽器的之間的關(guān)系预伺，那么首先订咸，我們應該擁有一個頁面滾動的監(jiān)聽方法。
偽代碼
監(jiān)聽方法{
// scrollHeight
// scrollTop
}
方向是沒錯的酬诀，但是過程是曲折的脏嚷。
最簡單的 監(jiān)聽方法
window.onscroll = function() { 頁面滾動語句 }
但是，這樣是不行的料滥，有兼容性問題然眼。，在不同的瀏覽器下會有不同的監(jiān)聽方法葵腹，所以我們應該先準備一個通用的方法高每，做好兼容工作屿岂。(萬惡的碎片化！＞洹爷怀！)
具體的差異
- 谷歌瀏覽器 和沒有聲明 DTD ：
document.body.scrollTop; - 火狐 和其他瀏覽器
document.documentElement.scrollTop; - ie9+ 和 最新瀏覽器 都認識
window.pageXOffset; pageYOffset （scrollTop）
==兼容的封裝方法==
兼容不同瀏覽器，返回Json格式的寬和高
<script>
// var json = {left: 10, right: 10} 變異
//json.left json.top
function scroll() {
if(window.pageYOffset != null) // ie9+ 和其他瀏覽器
{
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode == "CSS1Compat") // 聲明的了 DTD
// 檢測是不是怪異模式的瀏覽器 -- 就是沒有 聲明<!DOCTYPE html>
{
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 剩下的肯定是怪異模式的
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
window.onscroll = function() {
console.log(scroll().top);
}
</script>
二带欢、scrollLeft 和 scrollTop
獲取scrollLeft 和 scrollTop运授。
根據(jù)封裝好的方法，我們在頁面上放置了一個 100*100 px的盒子乔煞。
進行一下滾動吁朦，基于可以在控制臺看到很多即時打印的數(shù)據(jù)。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 3000px;
margin: 0px;
padding: 0px;
}
#div0{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="div0"></div>
</body>
</html>
<script>
// var json = {left: 10, right: 10} 變異
//json.left json.top
function scroll() {
if(window.pageYOffset != null) // ie9+ 和其他瀏覽器
{
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode == "CSS1Compat") // 聲明的了 DTD
// 檢測是不是怪異模式的瀏覽器 -- 就是沒有 聲明<!DOCTYPE html>
{
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 剩下的肯定是怪異模式的
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
window.onscroll = function() {
console.log("top： "+scroll().top);
console.log("left： "+scroll().left);
}
</script>
.
.
效果
image.png
.
.
小結(jié)圖
image.png
.
.
三渡贾、 scrollHeight 和 scrollWidth
scrollHeight和scrollWidth類似逗宜，我們以scrollHeight為例子。
- 使用scrollHeight和scrollWidth屬性返回元素的高度空骚，單位為px,包括padding
- scrollHeight 和 scrollWidth返回的數(shù)值是包括當前不可見部分的纺讲。
- scrollHeight 和 scrollWidth 屬性為只讀屬性
栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#myD {
margin-top: 10px;
height: 200px;
width: 250px;
/*內(nèi)容溢出設置*/
overflow: auto;
}
/*一個內(nèi)容高度遠比容器高度的例子*/
#content {
height: 500px;
width: 1000px;
padding: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<p>點擊以下按鈕，獲取id="content"的div元素的寬度和高度</p>
<button onclick="myFc()">按鈕</button>
<div id="myD">
<div id="content">內(nèi)容</div>
</div>
<p id="demo"></p>
<script>
function myFc() {
var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;
document.getElementById("demo").innerHTML = "高度: " + y + "px<br>寬度: " + x + "px";
}
</script>
</body>
</html>
.
.
結(jié)果：
image.png
小結(jié)圖
image.png
上面介紹的四個屬性囤屹，是從屬于元素的熬甚。
.
.
Element對象關(guān)于scroll的屬性 小結(jié)圖
image.png
.
.
window對象的scrollBy() 和scrollTo()
scrollBy()和scrollTo()方法是從屬于window對象的。
scrollBy(x,y)
scrollBy(x,y)方法滾動當前window中顯示的文檔肋坚，x和y指定滾動的相對量乡括。
scrollBy(0, 200) ==> 使得滾動條Y軸的位置，在當前的基礎上增加200冲簿。比如：當前Y軸位置為0粟判，執(zhí)行后便是200；當前為100峦剔，執(zhí)行后便是300。
- 要使此方法工作 window 滾動條的可見屬性必須設置為true角钩！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script>
function scrollWindow(){
//x軸方向的的變化用得少
window.scrollBy(100,100);
}
</script>
</head>
<body>
<input type="button" onclick="scrollWindow()" value="滾動條" />
<div style="width: 200px; height: 500px; background: darkcyan;font-size: 50px">001</div>
<div style="width: 200px; height: 500px; background: orange;font-size: 50px">002</div>
<div style="width: 200px; height: 500px; background: olivedrab;font-size: 50px">003</div>
<div style="width: 200px; height: 500px; background: aqua;font-size: 50px">004</div>
<div style="width: 200px; height: 500px; background: grey;font-size: 50px">005</div>
</body>
</html>
.
.
效果
image.png
scrollTo(x,y)
語法
scrollTo(xpos,ypos)
- xpos 必需吝沫。要在窗口文檔顯示區(qū)左上角顯示的文檔的 x 坐標。
- ypos 必需递礼。要在窗口文檔顯示區(qū)左上角顯示的文檔的 y 坐標惨险。
作用
scrollTo(x,y)方法：滾動當前window中顯示的文檔，讓文檔中由坐標x和y指定的點位于顯示區(qū)域的左上角
scrollTo(0, 200) ==> 同scroll()方法,設置Y軸在200像素的位置脊髓。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script>
function scrollWindow(){
//x軸方向的的變化用得少
window.scrollTo(0,1200);
}
</script>
</head>
<body>
<input type="button" onclick="scrollWindow()" value="滾動條" />
<div style="width: 200px; height: 500px; background: darkcyan;font-size: 50px">001</div>
<div style="width: 200px; height: 500px; background: orange;font-size: 50px">002</div>
<div style="width: 200px; height: 500px; background: olivedrab;font-size: 50px">003</div>
<div style="width: 200px; height: 500px; background: aqua;font-size: 50px">004</div>
<div style="width: 200px; height: 500px; background: grey;font-size: 50px">005</div>
</body>
</html>
.
.
效果：
image.png
相關(guān)：
JS offset系列簡明教程
JS client系列簡明教程
本文完辫愉。
