使用 JavaScript 獲取滾動條位置
Tahseen Tauseef
2023年10月12日
在本教程中，我們將討論如何在 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 所做的是獲取內容元素的容器，並獲取它從左側滾動的位置，然後獲取從頂部滾動的位置。