深入理解滾動scroll

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/09/01/5831640.html
-Advertisement-
Play Games

[1]滾動寬高 [2]頁面尺寸 [3]滾動長度 [4]頁面滾動 [5]滾動方法 [6]滾動事件 ...


×
目錄
[1]滾動寬高 [2]頁面尺寸 [3]滾動長度[4]頁面滾動[5]滾動方法[6]滾動事件

前面的話

　　前面兩篇博文分別介紹過偏移大小、可視區大小。本文介紹元素尺寸中內容最多的一部分——滾動scroll

 

滾動寬高

scrollHeight

　　scrollHeight表示元素的總高度，包括由於溢出而無法展示在網頁的不可見部分

scrollWidth

　　scrollWidth表示元素的總寬度，包括由於溢出而無法展示在網頁的不可見部分

　　[註意]IE7-瀏覽器返回值是不准確的

　　【1】沒有滾動條時，scrollHeight與clientHeight屬性結果相等，scrollWidth與clientWidth屬性結果相等

<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;"></div>
<script>
//120 120
console.log(test.scrollHeight,test.scrollWidth);
//120 120
console.log(test.clientHeight,test.clientWidth);
</script>

　　【2】存在滾動條時，但元素設置寬高大於等於元素內容寬高時，scroll和client屬性的結果相等

<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:1;">
    內容<br>內容<br>
</div>
<script>
//103(120-17) 103(120-17)
console.log(test.scrollHeight,test.scrollWidth);
//103(120-17) 103(120-17)
console.log(test.clientHeight,test.clientWidth);
</script>

　　【3】存在滾動條，但元素設置寬高小於元素內容寬高，即存在內容溢出的情況時，scroll屬性大於client屬性

　　[註意]scrollHeight屬性存在相容性問題，chrome和safari瀏覽器中，scrollHeight包含padding-bottom；而IE和firefox不包含padding-bottom

<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:200px;">
    內容</div>
<script>
//chrome/safari:220(200+10+10)
//firefox/IE:210(200+10)
console.log(test.scrollHeight);
//103(120-17)
console.log(test.clientHeight);
</script>

 

頁面尺寸

　　document.documentElement.clientHeight表示頁面的可視區域的尺寸，而document.documentElement.scrollHeight表示html元素內容的實際尺寸。但是由於各個瀏覽器表現不一樣，分為以下幾種情況

　　【1】html元素沒有滾動條時，IE和firefox的client和scroll屬性始終相同，且返回可視區的尺寸大小；而safari和chrome表現正常，clientHeight返回可視區域大小，而scroll返回元素內容大小

//firefox:  755 755
//chrome:   947 8(body元素的margin)
//safari:   744 8(body元素的margin)
//IE:       768 768
console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)

　　【2】html元素存在滾動條時，各個瀏覽器都表現正常。clientHeight返回可視區域大小，而scroll返回元素內容大小

<body style="height:1000px">
<script>
//firefox:  755 1016(1000+8*2)
//chrome:   947 1016(1000+8*2)
//safari:   744 1016(1000+8*2)
//IE:       768 1016(1000+8*2)
console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)
</script>

相容

　　因此要取得文檔實際高度時，要取得<html>元素的scrollHeight和clientHeight的最大值

var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
var docWidth  = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);

 

滾動長度

scrollTop

　　scrollTop屬性表示被隱藏在內容區域上方的像素數。元素未滾動時，scrollTop的值為0，如果元素被垂直滾動了，scrollTop的值大於0，且表示元素上方不可見內容的像素寬度

scrollLeft

　　scrollLeft屬性表示被隱藏在內容區域左側的像素數。元素未滾動時，scrollLeft的值為0，如果元素被水平滾動了，scrollLeft的值大於0，且表示元素左側不可見內容的像素寬度

　　當滾動條滾動到內容底部時，符合以下等式

scrollHeight == scrollTop  + clientHeight
<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:200px;">
    內容</div>
<button id='btn1'>點擊</button>
<div id="result"></div>
<script>
btn1.onclick = function(){
    result.innerHTML = 'scrollTop:' + test.scrollTop+';clientHeight:' + test.clientHeight + ';scrollHeight:' + test.scrollHeight
}
</script>

　　與scrollHeight和scrollWidth屬性不同的是，scrollLeft和scrollTop是可寫的

　　[註意]為scrollLeft和scrollTop賦值為負值時，並不會報錯，而是靜默失敗

<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:200px;">
    內容</div>
<button id='btn1'>向下滾動</button>
<button id='btn2'>向上滾動</button>
<script>
btn1.onclick = function(){test.scrollTop += 10;}
btn2.onclick = function(){test.scrollTop -= 10;}
</script>

 

頁面滾動

　　理論上，通過document.documentElement.scrollTop和scrollLeft可以反映和控制頁面的滾動；但是chrome和safari瀏覽器是通過document.body.scrollTop和scrollLeft來控制的

<body style="height:1000px">
<button id='btn1' style="position:fixed;top:0;">點擊</button>
<div id="result" style="position:fixed;top:30px;"></div>
<script>
btn1.onclick = function(){
    result.innerHTML = 'html的scrollTop:' + document.documentElement.scrollTop +';body的scrollTop:' + document.body.scrollTop;
}
</script>    
</body>

　　所以，頁面的滾動高度相容寫法是

var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop

回到頂部

　　可以利用scrollTop來實現回到頂部的功能

function scrollTop(){
    if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
}
<body style="height:1000px">
<button id='btn' style="position:fixed">回到頂部</button>
<script>
function scrollTop(){
    if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
}
btn.onclick = scrollTop;
</script>
</body>

　　還有兩個window的只讀屬性可以獲取整個頁面滾動的像素值，它們是pageXOffset和pageYOffset

pageXOffset

　　pageXOffset表示水平方向上頁面滾動的像素值

pageYOffset

　　pageYOffset表示垂直方向上頁面滾動的像素值

　　[註意]IE8-瀏覽器不支持

<body style="height:1000px">
<button id='btn1' style="position:fixed;top:0;">點擊</button>
<div id="result" style="position:fixed;top:30px;"></div>
<script>
btn1.onclick = function(){
    result.innerHTML = 'pageYOffset:' + window.pageYOffset;
}
</script>    
</body>

 

滾動方法

scrollTo(x,y)

　　scrollTo(x,y)方法滾動當前window中顯示的文檔，讓文檔中由坐標x和y指定的點位於顯示區域的左上角

<body style="height:1000px">
<button id='btn' style="position:fixed">滾動</button>
<script>
btn.onclick = function(){scrollTo(0,0);}
</script>

scrollBy(x,y)

　　scrollBy(x,y)方法滾動當前window中顯示的文檔，x和y指定滾動的相對量

<body style="height:1000px">
<button id='btn1' style="position:fixed">向下滾動</button>
<button id='btn2' style="position:fixed;top:40px">向上滾動</button>
<script>
btn1.onclick = function(){scrollBy(0,100);}
btn2.onclick = function(){scrollBy(0,-100);}
</script>

【小應用】

　　利用scrollBy()加setInterval計時器實現簡單的快速滾動功能

<body style="height:1000px">
<button id='btn1' style="position:fixed">開始滾動</button>
<button id='btn2' style="position:fixed;top:40px">停止滾動</button>
<script>
var timer = 0;
btn1.onclick = function(){
    timer = setInterval(function(){
        scrollBy(0,10);
    },100)}
btn2.onclick = function(){
    clearInterval(timer);
    timer = 0;
}
</script>

scrollIntoView()

　　Element.scrollIntoView方法滾動當前元素，進入瀏覽器的可見區域

　　該方法可以接受一個布爾值作為參數。如果為true，表示元素的頂部與當前區域的可見部分的頂部對齊（前提是當前區域可滾動）；如果為false，表示元素的底部與當前區域的可見部分的尾部對齊（前提是當前區域可滾動）。如果沒有提供該參數，預設為true

<body style="height:1000px">
<div id="test" style="height:100px;width:100px;position:absolute;left:0;top:500px;background-color:green"></div>
<button id='btn1' style="position:fixed">滾動到頁面開頭</button>
<button id='btn2' style="position:fixed;top:40px">滾動到頁面結尾</button>
<script>
btn1.onclick = function(){
    test.scrollIntoView();
};
btn2.onclick = function(){
    test.scrollIntoView(false);
}
</script>

scrollIntoViewIfNeeded()

　　scrollIntoViewIfNeeded(true)方法只在當前元素在視口中不可見的情況下，才滾動瀏覽器視窗或容器元素，最終讓它可見。如果當前元素在視口中可見，這個方法什麼也不做 

　　如果將可選的alignCenter參數設置為true，則表示儘量將元素顯示在視口中部(垂直方向)

　　[註意]該方法只有chrome和safari支持

<body style="height:1000px">
<div id="test" style="height:100px;width:100px;position:absolute;left:0;top:500px;background-color:green"></div>
<button id='btn' style="position:fixed">滾動到頁面中間</button>
<script>
btn.onclick = function(){
    test.scrollIntoViewIfNeeded(true)
};
</script>

scrollByLines(lineCount)

　　scrollByLines(lineCount)方法將元素的內容滾動指定的行髙，lineCount值可以是正值， 也可以是負值

　　[註意]該方法只有safari支持

<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:200px;">
    內容</div>
<button id='btn1'>向下滾動</button>
<button id='btn2'>向上滾動</button>
<script>
btn1.onclick = function(){test.scrollByLines(1);}
btn2.onclick = function(){test.scrollByLines(-1);}
</script>

scrollByPages(pageCount)

　　scrollByPages(pageCount)方法將元素的內容滾動指定的頁面高度，具體高度由元素的高度決定

　　[註意]該方法只有safari支持

<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:200px;">
    內容</div>
<button id='btn1'>向下滾動</button>
<button id='btn2'>向上滾動</button>
<script>
btn1.onclick = function(){test.scrollByPages(1);}
btn2.onclick = function(){test.scrollByPages(-1);}
</script>

 

滾動事件

　　scroll事件是在window對象上發生的，它表示的是頁面中相應元素的變化

<body style="height:1000px">
<div id="result" style="position:fixed;top:10px;"></div>
<script>
window.onscroll = function(){
    result.innerHTML = '頁面的scrollTop:' + (document.documentElement.scrollTop||document.body.scrollTop);
}
</script>    
</body>

 

最後

　　本文詳細介紹了滾動scroll的知識，基本上囊括了關於滾動現有的所有屬性和方法。本文中並未詳細介紹滾動條，詳細內容移步至此

　　下文將以實例的形式，對滾動的屬性和方法進行應用，總結回到頂部的多種寫法，並嘗試優化

　　歡迎交流


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 清新的簡歷樣式--CSS
    一把心酸一把淚。。。 這兩年一直在做智能交通的技術支持,現在想換行業，把簡歷貼出去只有技術支持崗位的公司來電話。自學了一個月，如果沒有進入開發項目的話，感覺好難成長起來；比如說現在就很迷茫。不清楚前端的路是怎麼走的，閉門造車。就怕學了一堆，然後別人說，你學的東西沒人在用了。 昨天，跟領導說換到研發部 ...
  • JavaScript閉包淺談
    閉包 就是指一個有權訪問另外一個函數作用域中的變數的函數。 《JavaScript高級程式第三版》 本人對於閉包初次的認識就來自《高三》，首先僅僅通過 “有權”’ 兩個字我們便可以進一步推斷出。在正常情況下，一個函數是 “無權” 訪問另外一個函數的作用域中的變數。 一、什麼是變數 因此在淺談 閉包 ...
  • angular.js學習－ng-grid
    ng-grid是基於AngularJS和JQuery的富表格控制項，由AngularUI Team領銜開發，到目前為止已有2354次Commit，1076個Fork。 AngualrUI：http://angular-ui.github.io/ ng-grid: http://angular-ui.g ...
  • javascript --- 遞歸的簡單理解
    遞歸函數大家都應該比較熟吧？那麼，如何在JavaScript中書寫一個完美的遞歸函數呢？且聽我娓娓道來。 遞歸函數 寫的時候，查了一下維基百科對遞歸函數的定義，恕我愚鈍，簡直太深奧了！所以，我還是簡單的說說我對遞歸函數的理解吧。遞歸函數，說白了就是在函數內部引用函數自身，最終到給定的遞歸結束條件時回 ...
  • 想要學好JQuery看這裡
    一.簡介 jQuery 庫可以通過一行簡單的標記被添加到網頁中 jQuery 是一個 JavaScript 函數庫。 jQuery 庫包含以下特性： HTML 元素選取 HTML 元素操作 CSS 操作 HTML 事件函數 JavaScript 特效和動畫 HTML DOM 遍歷和修改 AJAX U ...
  • JavaScript權威指南 - 數組
    JavaScript數組是一種特殊類型的對象。 JavaScript數組元素可以為任意類型，最大容納232 1個元素。 JavaScript數組是動態的，有新元素添加時，自動更新length屬性。 JavaScript數組元素索引可以是不連續的，它們之間可以有空缺。 1.創建數組 調用構造函數Arr ...
  • jQuery als.js 跑馬燈
    ali.js是一款滾動插件，滾動的內容可包含文字和圖片。它的API也很強大，包括滾動區域可見個數、每次滾動個數、滾動方向、是否迴圈滾動、是否自動滾動、滾動間隔時間、滾動動畫速度、動畫效果、滾動方向以及開始滾動索引。 線上實例 實例演示 使用方法 參數詳解 下載 ...
  • node.js中module.exports與exports的區別
    Node.js 引入了模塊（Module）概念，一個模塊可以通過module.exports 或 exports 將函數、變數等導出，以使其它 JavaScript 腳本通過require() 函數引入並使用。 module.exports 初始值為一個空對象 {}，所以 exports 初始值也是 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類