บทบาทของคุณสมบัติ pageYOffset ใน JavaScript

หากต้องการรับจำนวนพิกเซลที่เอกสารถูกเลื่อน (scroll) จากมุมซ้ายบนของหน้าต่าง ให้ใช้คุณสมบัติ pageXOffset และ pageYOffset ใช้ pageYOffset สำหรับพิกเซลแนวตั้ง (vertical)

ตัวอย่าง

ลองรันโค้ดด้านล่างเพื่อเรียนรู้การทำงานกับคุณสมบัติ pageYOffset ใน JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        background-color: green;
        height: 1500px;
        width: 1500px;
      }
    </style>
  </head>
  <body>
    <script>
      function scrollFunc() {
        window.scrollBy(200, 200);
        alert("Vertical: " + window.pageYOffset);
      }
    </script>
    <button onclick="scrollFunc()" style="position:fixed;">Scroll</button>
    <br><br><br>
    <div>
    </div>
  </body>
</html>

คำอธิบาย: window.pageYOffset คืนค่าจำนวนพิกเซลที่เลื่อนไปในแนวตั้ง (readonly) เป็น alias ของ window.scrollY ใช้ร่วมกับ pageXOffset (alias ของ scrollX) เพื่อดึงตำแหน่งการเลื่อนทั้งสองมิติ