บทบาทของ scrollX Property ใน JavaScript

Property window.scrollX คืนค่าจำนวนพิกเซลที่เอกสารถูก Scroll แนวนอน (Horizontal) จากมุมซ้ายบนของหน้าต่าง Browser เทียบเท่า window.pageXOffset

ตัวอย่างโค้ด

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

คำอธิบาย

window.scrollBy(200, 200) — Scroll ลง 200px และขวา 200px
window.scrollX — อ่านตำแหน่ง Scroll แนวนอนปัจจุบัน (Read-only)
window.pageXOffset — Alias เดิม ทำงานเหมือนกันทุก Browser สมัยใหม่

Properties ที่เกี่ยวข้อง

Property	ความหมาย	Alias
`scrollX`	Horizontal Scroll (px)	pageXOffset
`scrollY`	Vertical Scroll (px)	pageYOffset
`scrollTo(x, y)`	Scroll ไปตำแหน่งสัมบูรณ์	-
`scrollBy(x, y)`	Scroll แบบ Relative	-

การใช้งานจริง

Infinite Scroll / Lazy Load: เช็ค scrollX หรือ scrollY ใกล้ขอบล่าง
Parallax Effect: คำนวณตำแหน่ง Element จาก Scroll Offset
Sticky Header: ซ่อน/แสดง Header ตามทิศทาง Scroll