คุณต้องได้รับพิกัดของวัตถุ HTML บางอย่างเพื่อตั้งค่าพิกัดของเลเยอร์เป้าหมายอย่างยืดหยุ่นมากขึ้น ที่นี่คุณสามารถใช้แอตทริบิวต์เช่น document.body.scrolltop แต่คุณลักษณะเหล่านี้ได้รับในหน้าเว็บมาตรฐานของ XHTML หรือในแง่ง่ายค่าที่ได้รับในแท็กด้วย <! doctype ... > คือ 0; หากคุณไม่มีแท็กนี้ทุกอย่างเป็นเรื่องปกติดังนั้นจะได้รับพิกัดของร่างกายใน XHTML ได้อย่างไร? แน่นอนว่ามีวิธี เราใช้ document.documentElement เพื่อแทนที่ document.body ตัวอย่างเช่นคุณสามารถเขียนได้เช่นนี้:
การคัดลอกรหัสมีดังนี้:
var top = document.documentelement.scrolltop || document.body.scrooltop;
- ใน JS เป็นสิ่งที่ดี ไม่เพียง แต่สามารถใช้ในคำแถลงเงื่อนไขของ IF แต่ยังอยู่ในการกำหนดตัวแปร ตัวอย่างข้างต้นสามารถเขียนในรูปแบบต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
var top = document.documentelement.scrolltop? document.documentelement.scrolltop: document.body.scrolltop;
ด้วยวิธีนี้มันสามารถมีความเข้ากันได้ดี สิ่งหนึ่งที่ควรทราบคือถ้าค่าของ document.documentelement.scrolltop จะไม่ถูกประกาศจะแสดง 0 แทน
คำแนะนำในการรับตำแหน่งพิกัดแนวตั้งของพิกัดแถบเลื่อนในหน้าปัจจุบัน:
document.documentelement.scrolltop แทน
document.body.scrolltop;
Document.documentElement ได้รับแท็ก HTML
Document.body ได้รับแท็กร่างกาย
ภายใต้มาตรฐาน W3C, document.body.scrolltop อยู่เสมอ 0 และ document.documentelement.scrolltop จะต้องถูกแทนที่ด้วย document.documentelement.scrolltop;
หากเราต้องการค้นหาตำแหน่งสัมบูรณ์ของเมาส์ที่สัมพันธ์กับหน้าเว็บผลลัพธ์ส่วนใหญ่ที่เราได้รับในเครื่องมือค้นหาจะช่วยให้คุณใช้งาน
event.clientx+document.body.scrollleft, event.clienty+document.body.scrolltop;
มันแปลกถ้าคุณพบว่าเมาส์เบี่ยงเบนไปจากจินตนาการของคุณเพราะ document.body.scrollx วัตถุไม่ได้รับการสนับสนุนอีกต่อไปหลังจาก IE5.5
ดังนั้นเราต้องเพิ่มหนึ่งประโยค
การคัดลอกรหัสมีดังนี้:
if (document.body && document.body.scrolltop && document.body.scrollleft)
-
top = document.body.scrolltop;
ซ้าย = document.body.scrollleft;
-
if (document.documentelement && document.documentelement.scrolltop && document.documentelement.scrollleft)
-
top = document.documentelement.scrolltop;
ซ้าย = document.documentelement.scrollleft;
-
ต่อไปนี้เป็นประเพณีของพารามิเตอร์:
ความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.clientwidth;
ความสูงของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.clientheight;
ความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.offsetWidth; (รวมถึงความกว้างของเส้นขอบ);
ความสูงของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.offsetheight; (รวมถึงความกว้างของขอบ);
ความกว้างข้อความแบบเต็มของหน้าเว็บ: document.body.scrollwidth;
ข้อความเต็มของหน้าเว็บ: document.body.scrollheight;
หน้าเว็บจะเปิดตัวในระดับสูง: document.body.scrolltop;
ด้านซ้ายของหน้าเว็บที่กำลังเปิดตัว: document.body.scrollleft;
ในส่วนหลักของหน้าเว็บ: windows.screentop;
ด้านซ้ายของส่วนข้อความหน้าเว็บ: windows.screenleft;
ความละเอียดของหน้าจอสูง: windows.screen.height;
ความกว้างของความละเอียดหน้าจอ: windows.screen.widht;
ความสูงของพื้นที่ทำงานที่มีอยู่ของหน้าจอ: windows.screen.availheight;
หน้าจอความกว้างของพื้นที่ทำงาน: windows.screen.availwidth;
รับความสูงม้วนของวัตถุ: scrollheight;
ตั้งค่าหรือรับระยะห่างระหว่างขอบเขตด้านซ้ายของวัตถุและปลายด้านซ้ายสุดของเนื้อหาที่มองเห็นได้ในปัจจุบันในหน้าต่าง: Scrollleft;
ตั้งค่าหรือรับระยะห่างระหว่างด้านบนของวัตถุและด้านบนของเนื้อหาที่มองเห็นได้ในหน้าต่าง: Scrolltop;
รับความกว้างการเลื่อนของวัตถุ: Scrollwidth;
ได้รับความสูงของวัตถุที่สัมพันธ์กับเค้าโครงหรือพิกัดหลักที่ระบุโดยพิกัดหลัก: คุณสมบัติออฟเซ็ตพริป: ออฟเซท
รับตำแหน่งด้านซ้ายของการคำนวณของวัตถุที่สัมพันธ์กับเค้าโครงหรือพิกัดหลักที่ระบุโดยคุณสมบัติออฟเซ็ตพริป: ออฟเซ็ตฟ์;
รับตำแหน่งด้านบนที่คำนวณได้ของวัตถุที่สัมพันธ์กับเค้าโครงหรือพิกัดหลักที่ระบุโดยคุณสมบัติออฟเซ็ตท็อป: ออฟเซ็ตท็อป;
Event.Clientx: พิกัดแนวนอนที่สัมพันธ์กับเอกสาร;
Event.Clienty: พิกัดแนวตั้งที่สัมพันธ์กับเอกสาร;
Event.offsetx: พิกัดแนวนอนที่สัมพันธ์กับคอนเทนเนอร์
Event.offsety: พิกัดแนวตั้งที่สัมพันธ์กับคอนเทนเนอร์
document.documentelement.scrolltop: ตั้งค่าความสูงแนวตั้งของสโครล
Event.Clientx + document.documentElement.scrolltop: ตำแหน่งแนวนอนเทียบกับเอกสาร + จำนวนการเลื่อนในทิศทางแนวตั้ง;