Window scrollY แนวทาง

คำนิยามและการใช้งาน

scrollY ตัวแปรกลับค่าพิกเซลที่เคลื่อนย้ายตามแถวแววออกมาจากด้านบนซ้ายของหน้าต่างเอกสาร

scrollY ตัวแปรเป็นที่อ่านเฉพาะ

คำเตือน

scrollY ตัวแปร ตัวแปร pageYOffset แนวทาง

เพื่อความสามารถเปรียบเทียบเบราวเซอร์ที่มีความสามารถเดียวกัน ใช้ window.pageYOffset แทน window.scrollY.

ดูเพิ่มเติม

ตัวแปร pageXOffset

ตัวแปร pageYOffset

ตัวอย่าง

ตัวอย่าง 1

เคลื่อนลำดับเนื้อหา 100 พิกเซล และแจ้ง scrollX และ scrollY

window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);

ลองด้วยตัวเอง

ตัวอย่าง 2

สร้างแถวนำทางที่เหมือนดังนี้

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

ลองด้วยตัวเอง

สyntax

window.scrollY

หรือ

scrollY

ค่าที่ได้รับ

ประเภท อธิบาย
ตัวเลข จำนวนพิกเซลที่เคลื่อนย้ายตามแถวแววออกมาจากด้านบนซ้ายของหน้าต่างเอกสาร

โปรแกรมบราวเซอร์สนับสนุน

ทุกบราวเซอร์ทุกครั้งยอมรับ window.scrollY：

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