Window接口的scrollX屬性返回當前在當前窗口中水平滾動文檔的像素數。在現代瀏覽器中,此值是亞像素精確的,這意味著它不一定是整數。這是一個隻讀屬性。
用法:
var Scrx = window.scrollX
返回值:返回的值是一個雙精度浮點值,指示文檔當前從原點水平滾動的像素數。
例:本示例說明如何獲取要滾動的像素的精確數量
使用此屬性在文檔中水平放置。
在這裏,我們附加了較長的水平文本以超出框架,以實現水平滾動。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>window scrollX property</title>
</head>
<body style="text-align:center;">
GeeksforGeeksGeeksforGeeksGeeksforG
eeksGeeksforGeeksGeeksforGeeksGeeksforGeeks
GeeksforGeeksGeeksforGeeksGeeksforGeeksGeeks
forGeeksGeeksforGeeksGeeksforGeeksGeeksfor
GeeksGeeksforGeeksGeeksforGeeksGeeksforGeeks
GeeksforGeeksGeeksforGeeksGeeksforGeeksGeeks
forGeeksGeeksforGeeksGeeksforGeeksGeeksforGeeks
GeeksforGeeks
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
HTML | window scrollX property
</p>
<button onclick = "Geeks()">
Click Here
</button>
<p id="a"></p>
<script>
var a = document.getElementById("a");
function Geeks(){
a.innerHTML =
"scrollX is:" + window.scrollX;
}
</script>
</body>
</html>
輸出:
單擊按鈕之前:
單擊“按鈕:因此”後,可以看到水平滾動。
支持的瀏覽器:
- 穀歌瀏覽器
- Safari
- Firefox
- Opera
- Edge
相關用法
- HTML Window closed用法及代碼示例
- HTML Window parent用法及代碼示例
- HTML Window status用法及代碼示例
- HTML DOM Window performance屬性用法及代碼示例
- HTML DOM window crypto屬性用法及代碼示例
- HTML DOM window customElements屬性用法及代碼示例
- HTML DOM window event屬性用法及代碼示例
- HTML DOM window document屬性用法及代碼示例
- HTML DOM window devicePixelRatio屬性用法及代碼示例
- HTML DOM Window origin屬性用法及代碼示例
- HTML DOM Window speechSynthesis屬性用法及代碼示例
- HTML DOM Window visualViewport屬性用法及代碼示例
- HTML DOM Window navigator屬性用法及代碼示例
- HTML DOM Window scrollMaxY屬性用法及代碼示例
- HTML DOM Window scrollMaxX屬性用法及代碼示例
- HTML DOM Window scrollY屬性用法及代碼示例
注:本文由純淨天空篩選整理自taran910大神的英文原創作品 HTML DOM Window scrollX property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。