使用 JavaScript 獲取滾動條位置
Tahseen Tauseef
2023年1月30日
2022年5月11日
在本教程中,我們將討論如何在 JavaScript 中獲取滾動條位置,我們將討論:
- 什麼是滾動條和滾動條位置
- 如何使用
window
物件獲取滾動條位置 - 如何獲取元素內的滾動條位置
什麼是滾動條和滾動條位置
矩形條通常位於使用者可以滾動的瀏覽器視窗的最底端或最右端,從而定位使用者的檢視區域。許多使用者每天都使用滾動條,因為他們幾乎需要在每個網頁上上下滾動才能檢視更多內容。
滾動條是視窗檢視區域的水平或垂直位置,表示使用者從左側或頂部滾動了多少。預設情況下,滾動位置是從左邊 0px
和從頂部 0px
。
使用 JavaScript 中的 window
物件獲取滾動條位置
我們可以使用 window
物件獲取視窗上的滾動條位置。由於 window
物件就像任何其他 JavaScript 物件,我們可以新增一個 EventListener 來監聽 scroll
事件。
window.addEventListener("scroll", (event) => {
let scrollY = this.scrollY;
let scrollX = this.scrollX;
console.log(scrollY);
console.log(scrollX);
});
this
在這個上下文中被稱為 window
物件。scrollY
是 window
的一個屬性,它告訴我們視窗檢視區域從頂部滾動的畫素數。scrollX
是 window
物件的一個屬性,它告訴我們使用者從左邊滾動了多少。
在 JavaScript 中獲取元素內的滾動條位置
在某些情況下,你需要獲取的不是整個視窗的滾動位置,而是相對於某個元素的滾動位置。讓我們看一個這樣做的例子。
<!DOCTYPE html>
<html>
<head>
<style>
#ContentContainer {
height: 250px;
width: 250px;
overflow: auto;
}
#content {
height: 500px;
width: 1000px;
background-color: red;
}
</style>
</head>
<body>
<div id="ContentContainer" onscroll="getScrollPoistion()">
<div id="content">Content to Scroll</div>
</div>
<script>
function getScrollPoistion() {
var ContainerElement = document.getElementById("ContentContainer");
var x = ContainerElement.scrollLeft;
var y = ContainerElement.scrollTop;
console.log(x); // scroll position from Left
console.log(y); // scroll position from top
}
</script>
</body>
</html>
在上面的程式碼段中,具有 ContentContainer
的 id
的元素具有 onscroll
屬性;每當使用者在元素內滾動時,就會執行 getScrollPosition
函式。
getScrollPosition
所做的是獲取內容元素的容器,並獲取它從左側滾動的位置,然後獲取從頂部滾動的位置。