ตั้งค่าตำแหน่งเลื่อน


108

ฉันกำลังพยายามตั้งค่าตำแหน่งการเลื่อนบนหน้าเพื่อให้ตัวเลื่อนเลื่อนไปทางด้านบนจนสุด

ฉันคิดว่าฉันต้องการอะไรแบบนี้ แต่มันใช้ไม่ได้:

(function () { alert('hello'); document.body.scrollTop = 0; } ());

ความคิดใด ๆ ?

คำตอบ:




34

โปรดทราบว่าหากคุณต้องการเลื่อนองค์ประกอบแทนที่จะเป็นแบบเต็มหน้าต่างองค์ประกอบจะไม่มีscrollToและscrollByวิธีการ คุณควร:

var el = document.getElementById("myel"); // Or whatever method to get the element

// To set the scroll
el.scrollTop = 0;
el.scrollLeft = 0;

// To increment the scroll
el.scrollTop += 100;
el.scrollLeft += 100;

นอกจากนี้คุณยังสามารถเลียนแบบwindow.scrollToและwindow.scrollByฟังก์ชันกับองค์ประกอบ HTML ที่มีอยู่ทั้งหมดในเว็บเพจบนเบราว์เซอร์ที่ไม่รองรับโดยกำเนิด :

Object.defineProperty(HTMLElement.prototype, "scrollTo", {
    value: function(x, y) {
        el.scrollTop = y;
        el.scrollLeft = x;
    },
    enumerable: false
});

Object.defineProperty(HTMLElement.prototype, "scrollBy", {
    value: function(x, y) {
        el.scrollTop += y;
        el.scrollLeft += x;
    },
    enumerable: false
});

ดังนั้นคุณสามารถทำได้:

var el = document.getElementById("myel"); // Or whatever method to get the element, again

// To set the scroll
el.scrollTo(0, 0);

// To increment the scroll
el.scrollBy(100, 100);

หมายเหตุ: Object.definePropertyได้รับการสนับสนุนเนื่องจากการเพิ่มคุณสมบัติโดยตรงprototypeเป็นการทำลายนิสัยที่ไม่ดี (เมื่อคุณเห็น :-)


นี่เป็นประโยชน์อย่างยิ่งขอบคุณ แต่ฉันพบว่าองค์ประกอบมีเมธอด 'scrollTo' ดูdeveloper.mozilla.org/en-US/docs/Web/API/Element/scrollTo
Narvalex

@Narvalex นั่นคือสิ่งที่ย่อหน้าที่สองระบุ
Jorge Fuentes González

การอ้างอิงที่ฉันชี้ให้เห็นแสดงให้เห็นว่าฟังก์ชันเหล่านั้นมีอยู่ในตัว ไม่จำเป็นต้องกำหนดคุณสมบัติของวิธีการในตัว
Narvalex

@Narvalex โอ้ฉันเพิ่งอ่าน "ไม่มี" ของฉันไม่ดี ฉันต้องระบุว่าไม่ใช่ทุกเบราว์เซอร์ที่มีแม้ว่าในปัจจุบันจะหาเบราว์เซอร์ดังกล่าวได้ยาก (เช่น IE11)
Jorge Fuentes González

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.