คุณสมบัติHTML DOM scrollLeft
ตัวอย่าง
รับจำนวนพิกเซลที่เนื้อหาขององค์ประกอบ <div> ถูกเลื่อนในแนวนอนและแนวตั้ง:
var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติ scrollLeft ตั้งค่าหรือส่งคืนจำนวนพิกเซลที่เนื้อหาขององค์ประกอบถูกเลื่อนในแนวนอน
เคล็ดลับ:ใช้ คุณสมบัติ scrollTopเพื่อตั้งค่าหรือส่งคืนจำนวนพิกเซลที่เนื้อหาขององค์ประกอบถูกเลื่อนในแนวตั้ง
เคล็ดลับ:หากต้องการเพิ่มแถบเลื่อนให้กับองค์ประกอบ ให้ใช้ คุณสมบัติโอเวอร์โฟ ลว์ CSS
รองรับเบราว์เซอร์
Property | |||||
---|---|---|---|---|---|
scrollLeft | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์
ส่งคืนคุณสมบัติ scrollLeft:
element.scrollLeft
ตั้งค่าคุณสมบัติ scrollLeft:
element.scrollLeft = pixels
มูลค่าทรัพย์สิน
Value | Description |
---|---|
pixels |
Specifies the number of pixels the element's content is scrolled horizontally. Special notes:
|
รายละเอียดทางเทคนิค
คืนมูลค่า: | ตัวเลข แทนจำนวนพิกเซลที่เลื่อนเนื้อหาขององค์ประกอบในแนวนอน |
---|
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เลื่อนเนื้อหาของ <div> องค์ประกอบถึง 50 พิกเซลในแนวนอนและ 10 พิกเซลในแนวตั้ง:
var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft = 50;
elmnt.scrollTop = 10;
ตัวอย่าง
เลื่อนเนื้อหาของ <div> องค์ประกอบ 50 พิกเซลในแนวนอนและ 10 พิกเซลในแนวตั้ง:
var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft += 50;
elmnt.scrollTop += 10;
ตัวอย่าง
เลื่อนเนื้อหาของ <body> 30 พิกเซลในแนวนอนและ 10 พิกเซลในแนวตั้ง:
var body = document.body; // Safari
var html = document.documentElement; //
Chrome, Firefox, IE and Opera places the overflow at the <html> level, unless else is specified. Therefore, we use the
documentElement property for these browsers
body.scrollLeft += 30;
body.scrollTop += 10;
html.scrollLeft += 30;
html.scrollTop += 10;