$ (หน้าต่าง) .scrollTop () เทียบกับ $ (เอกสาร) .scrollTop ()

184

ความแตกต่างระหว่าง:

$(window).scrollTop()

และ

$(document).scrollTop()

ขอบคุณ

— ชำแรก
แหล่งที่มา

2

'html' หรือ 'body' สำหรับ setter (ขึ้นอยู่กับเบราว์เซอร์) ... 'window' สำหรับ getter ... cf Fiddle: jsfiddle.net/molokoloco/uCrLa

— molokoloco

149

พวกเขาทั้งสองจะมีผลเหมือนกันผลเช่นเดียวกัน

อย่างไรก็ตามในขณะที่ชี้ให้เห็นในความคิดเห็น: $(window).scrollTop()ได้รับการสนับสนุนโดยเว็บเบราว์เซอร์อื่น ๆ อีกมากมาย$('html').scrollTop()กว่า

— Bodman
แหล่งที่มา

3

มันกลับ 0 ใน IE8 (แม้ว่าหน้าเว็บของฉันอยู่ในโหมดนิสัยใจคอซึ่งอาจจะเล่นเป็นปัจจัย)

— เกร็กเล่นหูเล่นตา

38

$ ('html') scrollTop () ไม่ใช่ cross-browser (เป็น setter มันไม่ทำงานอย่างน้อยใน Chrome) วิธีที่ crossbrowser ใช้มากที่สุดในตอนนี้คือ $ (หน้าต่าง) .scrollTop () ในฐานะ getter, $ ('html, body') scrollTop (offset) เป็น setter

— Georgii Ivankin

6

ตามการอ้างอิงนี้ไม่มีข้อโต้แย้งscrollTopไม่เลื่อนที่ใดก็ได้ แต่เพียงส่งกลับตำแหน่งเลื่อนปัจจุบัน

— หรือผู้ทำแผนที่

3

@ d2burke scrollTop()เป็น getter และscrollTop(value)เป็น setter scrollTop()ไม่มีข้อโต้แย้งไม่เปลี่ยนตำแหน่งการเลื่อน

1

@ M98 window.scrollTo (x, y)

— Bodman

36

ครั้งแรกที่คุณต้องเข้าใจความแตกต่างระหว่างและwindow วัตถุเป็นระดับบนสุดของวัตถุฝั่งไคลเอ็นต์ ไม่มีอะไรอยู่เหนือวัตถุ JavaScript เป็นภาษาที่มุ่งเน้นวัตถุ คุณเริ่มต้นด้วยวัตถุและใช้วิธีการกับคุณสมบัติหรือคุณสมบัติของกลุ่มวัตถุ ตัวอย่างเช่นวัตถุนั้นเป็นวัตถุของวัตถุ เมื่อต้องการเปลี่ยน'สีพื้นหลังของคุณต้องการตั้งของสถานที่ให้บริการdocumentwindowwindowdocumentwindowdocumentdocumentbgcolor

window.document.bgcolor = "red"

เพื่อที่จะตอบคำถามของคุณมีความแตกต่างในผลสุดท้ายระหว่างไม่เป็นและwindow document scrollTopทั้งสองจะให้ผลลัพธ์เดียวกัน

ตรวจสอบตัวอย่างการทำงานที่ http://jsfiddle.net/7VRvj/6/

ในการใช้งานทั่วไปdocumentส่วนใหญ่จะลงทะเบียนเหตุการณ์และใช้windowในการทำสิ่งที่ชอบscroll, และscrollTopresize

— ฮุสเซน
แหล่งที่มา

ไม่มีความแตกต่างในผลลัพธ์สุดท้าย ทั้งสองจะให้ผลลัพธ์เดียวกัน

— ฮุสเซน

เห็นได้ชัดว่าไม่บางเบราว์เซอร์ไม่สนับสนุนการเลื่อนหน้าต่างเนื่องจากวัตถุหน้าต่างอาจไม่เป็นวัตถุที่ล้น

— Bodman

11

เบราว์เซอร์ใดที่ไม่สนับสนุนหน้าต่างให้เจาะจง นี่คือตัวอย่าง jsfiddle.net/7VRvj/4 ตรวจสอบในเบราว์เซอร์ทั้งหมดและแจ้งให้เราทราบว่าเบราว์เซอร์ใดที่ใช้งานไม่ได้

— ฮุสเซน

4

วิธีเบราว์เซอร์ข้ามในการทำเช่นนี้คือ

var top = ($(window).scrollTop() || $("body").scrollTop());

— Amachree tamunoemi
แหล่งที่มา

1

หมายเหตุ: $("body").scrollTop()ส่งคืน 0 เสมอใน Google Chrome

— โจนาธานผู้ปกครองLévesque

2

$("body").scrollTop()จะเลิกไม่ทำงานบน Chrome หรือ FF อีกต่อไป มันจะคืนค่า 0

— Jorge Lazo

0

ฉันเพิ่งมีปัญหาที่คล้ายกันกับ scrollTopอธิบายไว้ที่นี่

ในที่สุดฉันได้รับรอบนี้ในFirefoxและIEโดยใช้ตัวเลือก$('*').scrollTop(0);

ไม่สมบูรณ์หากคุณมีองค์ประกอบที่คุณไม่ต้องการให้มีผลกระทบ แต่จะทำให้เกิดความไม่เสมอภาคในเอกสาร, เนื้อหา, HTML และหน้าต่าง ถ้ามันช่วย ...

— Tapiochre
แหล่งที่มา

20

คุณไม่ควรใช้ * วิธีนี้ (อันที่จริงควรหลีกเลี่ยง * รวมกัน) แทนที่จะกำหนดเป้าหมายองค์ประกอบเดียวคุณจะมีผลกับ DOM ทั้งหมด การแสดงที่ยอดเยี่ยมมาก ตัวเลือกควรแม่นยำที่สุดเท่าที่จะทำได้

— วลาด

2

โดยส่วนตัวฉันมักจะใช้$("html,body").scrollTop(val)- ไม่เคยมีปัญหาใด ๆ

— Roi