คุณสมบัติ pageYOffset ของ Window ใน HTML: ตรวจสอบตำแหน่งการเลื่อนหน้าเว็บ

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

ไวยากรณ์ (Syntax)

window.pageYOffset

คืนค่า: number - จำนวนพิกเซลที่เลื่อนลงมาจากด้านบน (Read-only)

ตัวอย่างการใช้งาน

ตัวอย่างนี้แสดงค่า pageYOffset เมื่อคลิกปุ่ม และทดสอบการเลื่อนหน้าจอ

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    text-align: center;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
  .box {
    width: 1000px;
    height: 1000px;
    background: teal;
    color: #fff;
    font-size: 1.5rem;
    text-align: left;
    padding: 20px;
  }
</style>
</head>
<body>
<h1>สาธิตคุณสมบัติ pageYOffset ของ Window ใน HTML</h1>
<button onclick="scrollFn()" class="btn">เลื่อนหน้าจอ</button>
<button onclick="display()" class="btn">แสดงค่า pageYOffset</button>
<div class="box"></div>
<script>
  function display() {
    document.querySelector('.box').innerHTML = 'ค่าของ pageYOffset คือ: ' + window.pageYOffset + 'px';
  }
  function scrollFn() {
    window.scrollBy(0, 10);
  }
</script>
</body>
</html>

ผลลัพธ์

1. คลิกปุ่ม "แสดงค่า pageYOffset" เพื่อดูค่าเริ่มต้น (ควรเป็น 0)
2. คลิกปุ่ม "เลื่อนหน้าจอ" เพื่อเลื่อนลง 10 พิกเซล
3. คลิกปุ่ม "แสดงค่า pageYOffset" อีกครั้ง จะเห็นค่าเพิ่มขึ้น

คุณสมบัติที่เกี่ยวข้อง

การประยุกต์ใช้

• สร้าง Navbar ที่ติดขอบบนเมื่อเลื่อนลง (Sticky Header)
• Lazy Loading รูปภาพเมื่อเลื่อนเข้าใกล้
• Infinite Scroll โหลดข้อมูลเพิ่มเมื่อเลื่อนถึงด้านล่าง
• Parallax Scrolling Effect