JavaScript scrollTo()
當元素或者文件的內容超過其width或者height時,會在橫向或者縱向出現滾動條。
這時可以使用滑鼠拖動滾動條調整位置,在觸屏移動端則可以使用手指拖動調整位置。
JavaScript的scrollTo方法也也可以實現調整規定條位置的功能。
語法結構一:
[JavaScript] 純文字檢視 複製程式碼element.scrollTo(x-coord, y-coord) element.scrollTo(options)
引數解析:
(1).x-coord:規定在x軸座標拖動的尺寸,單位是畫素。
(2).y-coord:規定在y軸座標拖動的尺寸,單位是畫素。
此方法的引數除了可以是兩個表示目標橫座標和縱座標的數字之外,也可以是物件直接量。
簡單程式碼演示如下:
[JavaScript] 純文字檢視 複製程式碼options= { left: num, top: num, behavior:behavior }
此物件具有三個屬性,解析如下:
(1).left:此屬性與x-coord引數對應,屬性值是一個數字,預設單位是畫素。
(2).top:此屬性與y-coord引數對應,屬性值是一個數字,預設單位是畫素。
(3).behavior:此屬性規定調整是以動畫方式完成,還是瞬間完成,具有兩個屬性值,"auto"與"smooth"。
既然是調整滾動條的位置,那必須在一個座標系中,否則你無法定位。
座標系簡單圖示如下:
上圖示註的已經很明顯了,下面再簡單的闡述一下:
(1).上面是一個div元素用於演示座標系純黑色的是邊框。
(2).頂部橫向是x軸,向左為正,不包括邊框。
(3).左側縱向是y軸,向下為正,不包括邊框。
瀏覽器支援:
(1).IE瀏覽器不支援此方法。
(2).edge瀏覽器不支援此方法。
(3).谷歌瀏覽器支援此方法。
(4).opera瀏覽器支援此方法。
(5).火狐瀏覽器支援此方法。
(6).safria瀏覽器支援此方法,但是不支援options引數。
語法結構二:
[JavaScript] 純文字檢視 複製程式碼window.scrollTo(x-coord, y-coord) window.scrollTo(options)
引數解析:
(1).x-coord:必需,要在瀏覽器客戶區左上角顯示的文件的x座標。
(2).y-coord:必需,要在瀏覽器客戶區左上角顯示的文件的y座標。
關於瀏覽器客戶區可以參閱瀏覽器客戶區是哪塊區域一章節。
此方法的引數除了可以是兩個表示目標橫座標和縱座標的數字之外,也可以是物件直接量。
簡單程式碼演示如下:
[JavaScript] 純文字檢視 複製程式碼options= { left: num, top: num, behavior:behavior }
此物件具有三個屬性,解析如下:
(1).left:此屬性與x-coord引數對應,屬性值是一個數字,預設單位是畫素。
(2).top:此屬性與y-coord引數對應,屬性值是一個數字,預設單位是畫素。
(3).behavior:此屬性規定調整是以動畫方式完成,還是瞬間完成,具有兩個屬性值,"auto"與"smooth"。
瀏覽器支援:
(1).IE瀏覽器支援此方法,但是不支援options引數。
(2).edge瀏覽器支援此方法,但是不支援options引數。
(3).谷歌瀏覽器支援此方法。
(4).opera瀏覽器支援此方法。
(5).火狐瀏覽器支援此方法。
(6).safria瀏覽器支援此方法,但是不支援options引數。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #box { width:200px; height:200px; background-color: #ccc; margin:50px; overflow: auto; } #inner{ width:20px; height:400px; background-color:red; } </style> <script> window.onload=function(){ let obox=document.getElementById("box"); obox.scrollTo(0,100); } </script> </head> <body> <div id="box"> <div id="inner">螞蟻部落歡迎您</div> </div> </body> </html>
進入頁面可以看到滾動條的位置發生了位移,這就是通過scrollTo方法設定的。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { padding:0px; margin:0px; } body { width:2000px; } div { width:20px; height:1500px; background-color:green; margin: 0px auto; } </style> <script type="text/javascript"> window.onload = function () { var obt = document.getElementById("bt"); obt.onclick = function () { window.scrollTo(100, 500) } } </script> </head> <body style="height:1500px;"> <input type="button" id="bt" value="點選實現滾動"/> <div>螞蟻部落</div> </body> </html>
點選按鈕可以將文件滾動到指定的座標。
相關文章
- Android 淺談scrollTo和scrollBy原始碼Android原始碼
- 三種滑動方式的比較(scrollTo & view動畫 & 改變佈局引數)View動畫
- JavaScript高階:JavaScript物件導向,JavaScript內建物件,JavaScript BOM,JavaScript封裝JavaScript物件封裝
- javaScript系列[06]-javaScript和thisJavaScript
- 【JavaScript學習】JavaScript物件建立JavaScript物件
- 【轉】eval()函式(javascript) - [javaScript]函式JavaScript
- [Javascript] How javascript read the property?JavaScript
- JavaScript -"this"JavaScript
- javascript ??JavaScript
- This in JavaScriptJavaScript
- “This” is For JavaScriptJavaScript
- javascript thisJavaScript
- JavaScriptJavaScript
- javaScript系列[05]-javaScript和JSONJavaScriptJSON
- 44 道 JavaScript 難題(JavaScript Puzzlers!)JavaScript
- 【轉向JavaScript系列】AST in Modern JavaScriptJavaScriptAST
- javascript,還是javascript的問題JavaScript
- JavaScript 教程之JavaScript常用框架簡介JavaScript框架
- 《深入理解JavaScript》——2.3 JavaScript有用嗎JavaScript
- 【JavaScript】--JavaScript總結一覽無餘JavaScript
- 【HTML、JAVASCRIPT、CSS】3、Javascript基本概念HTMLJavaScriptCSS
- [Javascript] Understanding JavaScript Proxies with Symbol.toPrimitiveJavaScriptSymbolMIT
- JavaScript EventJavaScript
- JavaScript BackdoorJavaScript
- JavaScript normalize()JavaScriptORM
- JavaScript setDate()JavaScript
- JavaScript setMinutes()JavaScript
- JavaScript getDate()JavaScript
- JavaScript setHours()JavaScript
- JavaScript setUTCMinutes()JavaScript
- JavaScript setUTCHours()JavaScript
- JavaScript setUTCFullYear()JavaScript
- JavaScript setUTCMonth()JavaScript
- JavaScript setUTCDate()JavaScript
- JavaScript getUTCMinutes()JavaScript
- JavaScript setMonth()JavaScript
- JavaScript getMonth()JavaScript
- JavaScript getMinutes()JavaScript