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

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

ตัวอย่าง

ลองรันโค้ดด้านล่างเพื่อเรียนรู้การทำงานกับคุณสมบัติ pageXOffset ใน 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("Horizonal: " + window.pageXOffset);
      }
    </script>
    <button onclick="scrollFunc()" style="position:fixed;">Scroll</button>
    <br><br><br>
    <div>
    </div>
  </body>
</html>

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