คุณสมบัติ pageXOffset ของ Window

คำนิยามและวิธีใช้

pageXOffset คุณสมบัติกลับมาค่าพิกเซลที่บันทึกมาจากด้านซ้ายบนของหน้าต่าง

pageXOffset คุณสมบัติเท่ากับ scrollX คุณสมบัติ

pageXOffset คุณสมบัติเป็นค่าเดี่ยว

ดูเพิ่มเติม:

คุณสมบัติ screenX

คุณสมบัติ screenY

ตัวอย่าง

ตัวอย่าง 1

เลื่อนเนื้อหา 100 พิกเซล และแจ้งเตือน pageXOffset และ pageYOffset

window.scrollBy(100, 100);
alert(window.pageXOffset + window.pageYOffset);

ลองทดสอบด้วยตัวเอง

ตัวอย่าง 2

สร้างแถวประวัติที่เหมือนติด

// ดึงแถวประวัติ
const navbar = document.getElementById("navbar");
// ดึงตำแหน่งการเลื่อนของแถวประวัติ
const sticky = navbar.offsetTop;
// ใส่คลาส sticky ให้กับแถวประวัติเมื่อคุณไปถึงตำแหน่งของการเลื่อนที่แถวประวัติ ลบคลาส sticky ออกเมื่อออกจากตำแหน่งของการเลื่อนที่แถวประวัติ
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

ลองทดสอบด้วยตัวเอง

รูปแบบการใช้งาน

window.pageXOffset

หรือ:

pageXOffset

ค่าที่กลับมา

ชนิด คำอธิบาย
ตัวเลข จำนวนพิกเซลที่บันทึกมาจากด้านซ้ายบนของหน้าต่าง

เบราซเซอร์สนับสนุน

ทุกเบราซเซอร์เข้าถึงได้ window.pageXOffset：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
สนับสนุน 9-11 สนับสนุน สนับสนุน สนับสนุน สนับสนุน