HTML DOM Element scrollTop โปรทีศ์

การกำหนดและการใช้งาน

scrollTop โปรทีศ์ที่ตั้งค่าหรือกลับค่าเนื้อหาย้ายขึ้นด้านล่างด้วยพิกเซล

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

scrollLeft โปร퍼ตี

คุณสมบัติ overflow ของ CSS

เหตุการณ์ onscroll

ตัวอย่าง

ตัวอย่าง 1

ดึงจำนวนพิกเซลของการเคลื่อนที่ "myDIV" ของเนื้อหา：

const element = document.getElementById("myDIV");
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;

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

ตัวอย่าง 2

เคลื่อนที่เนื้อหาของ "myDIV" ขึ้นนอกเชิงนับรวม 50 พิกเซล และลงด้านล่าง 10 พิกเซล：

const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;

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

ตัวอย่าง 3

เคลื่อนที่เนื้อหาของ "myDIV" ขึ้นนอกเชิงนับรวม 50 พิกเซล และลงด้านล่าง 10 พิกเซล：

const element = document.getElementById("myDIV");
element.scrollLeft += 50;
element.scrollTop += 10;

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

ตัวอย่าง 4

ย้ายเนื้อหาของ <body> โดยทางนอก 30 พิกเซล และทางลึก 10 พิกเซล:

const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;

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

ตัวอย่าง 5

เปลี่ยนคลาสระหว่างตำแหน่งเคลื่อนที่ต่างๆ - เมื่อผู้ใช้เคลื่อนที่ลงจากด้านบนของหน้าเว็บ 50 พิกเซล จะเพิ่มคลาส "test" ในองค์ประกอบ (และลบเมื่อเคลื่อนที่ขึ้นอีกครั้ง):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  }
    document.getElementById("myP").className = "";
  }
}

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

ตัวอย่าง 6

เมื่อผู้ใช้เคลื่อนที่ลงจากด้านบนของหน้าเว็บ 350 พิกเซล ให้องค์ประกอบเข้ามา (เพิ่มคลาส slideUp):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

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

ภาษาบอกความ

ส่งออกคุณสมบัติ scrollTop:

element.scrollTop

ตั้งค่าคุณสมบัติ scrollTop:

element.scrollTop = pixels

ค่าของแอตทริบิวต์

ค่า คำอธิบาย
pixels

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

  • ถ้าตัวเลขนี้เป็นตัวเลขลบ จะตั้งค่าตัวเลขเป็น 0
  • ถ้าองค์ประกอบไม่สามารถเคลื่อนที่ได้ จะตั้งค่าตัวเลขเป็น 0
  • ถ้าตัวเลขนี้เกินค่าสูงสุดที่ยอมรับ จะตั้งค่าตัวเลขนี้เป็นค่าสูงสุด

ค่าที่ส่งออกมา

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

การสนับสนุนของบราวเซอร์

ทุกบราวเซอร์ทุกๆ รุ่นเกิดการเคลื่อนที่ element.scrollTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน