จะรับตำแหน่ง scrollbar ด้วย Javascript ได้อย่างไร

ฉันพยายามตรวจสอบตำแหน่งของแถบเลื่อนของเบราว์เซอร์ด้วย JavaScript เพื่อตัดสินใจว่ามุมมองปัจจุบันอยู่ที่ไหนในหน้า ฉันเดาว่าฉันต้องตรวจสอบตำแหน่งของนิ้วโป้งบนแทร็กแล้วความสูงของนิ้วโป้งเป็นเปอร์เซ็นต์ของความสูงทั้งหมดของแทร็ก ฉันมีความซับซ้อนเกินจริงหรือ JavaScript มีวิธีแก้ปัญหาที่ง่ายกว่านั้นหรือไม่? ความคิดใด ๆ ที่ชาญฉลาด

คุณสามารถใช้element.scrollTopและelement.scrollLeftเพื่อให้ได้ offset ในแนวตั้งและแนวนอนตามลำดับที่ถูกเลื่อน elementอาจเป็นdocument.bodyถ้าคุณใส่ใจกับทั้งหน้า คุณสามารถเปรียบเทียบกับelement.offsetHeightและelement.offsetWidth( elementอาจเป็นร่างกาย) อีกครั้งหากคุณต้องการเปอร์เซ็นต์

ฉันทำสิ่งนี้เพื่อ<div>บน Chrome

องค์ประกอบ. scrollTop - เป็นพิกเซลที่ซ่อนอยู่ด้านบนอันเนื่องมาจากการเลื่อน ไม่มีการเลื่อนค่าของมันคือ 0

องค์ประกอบ. scrollHeight - เป็นพิกเซลของ div ทั้งหมด

องค์ประกอบ . clientHeight - เป็นพิกเซลที่คุณเห็นในเบราว์เซอร์ของคุณ

var a = element.scrollTop;

จะเป็นตำแหน่ง

var b = element.scrollHeight - element.clientHeight;

จะเป็นสูงสุดค่าสำหรับscrollTop

var c = a / b;

จะเป็นเปอร์เซ็นต์ของเลื่อน[0-1]

document.getScroll = function() {
    if (window.pageYOffset != undefined) {
        return [pageXOffset, pageYOffset];
    } else {
        var sx, sy, d = document,
            r = d.documentElement,
            b = d.body;
        sx = r.scrollLeft || b.scrollLeft || 0;
        sy = r.scrollTop || b.scrollTop || 0;
        return [sx, sy];
    }
}

ส่งคืนอาร์เรย์ที่มีจำนวนเต็มสองจำนวน - [scrollLeft, scrollTop]

มันเป็นอย่างนี้ :)

window.addEventListener("scroll", function (event) {
    var scroll = this.scrollY;
    console.log(scroll)
});

คำตอบสำหรับปี 2018 :

วิธีที่ดีที่สุดที่จะทำสิ่งที่ชอบคือการใช้แยกสังเกตการณ์ API

Intersection Observer API ให้วิธีการแบบอะซิงโครนัสสังเกตการเปลี่ยนแปลงในการแยกขององค์ประกอบเป้าหมายด้วยองค์ประกอบบรรพบุรุษหรือด้วยวิวพอร์ตของเอกสารระดับบนสุด

ในอดีตการตรวจจับการมองเห็นขององค์ประกอบหรือการมองเห็นที่สัมพันธ์กันของสององค์ประกอบที่เกี่ยวข้องกันนั้นเป็นงานที่ยากซึ่งโซลูชันไม่น่าเชื่อถือและมีแนวโน้มที่จะก่อให้เกิดเบราว์เซอร์และเว็บไซต์ที่ผู้ใช้เข้าถึง น่าเสียดายที่เมื่อเว็บเติบโตขึ้นความต้องการข้อมูลประเภทนี้ก็เพิ่มขึ้น จำเป็นต้องใช้ข้อมูลทางแยกด้วยเหตุผลหลายประการเช่น:

• การโหลดรูปภาพหรือเนื้อหาอื่น ๆ อย่างขี้เกียจเมื่อเลื่อนหน้า
• การใช้งานเว็บไซต์ "เลื่อนไม่สิ้นสุด" ซึ่งมีการโหลดและแสดงเนื้อหามากขึ้นเรื่อย ๆ เมื่อคุณเลื่อนเพื่อให้ผู้ใช้ไม่ต้องพลิกหน้า
• การรายงานการเปิดเผยโฆษณาเพื่อคำนวณรายได้โฆษณา
• การตัดสินใจว่าจะปฏิบัติงานหรือกระบวนการแอนิเมชั่นหรือไม่ขึ้นอยู่กับว่าผู้ใช้จะเห็นผลลัพธ์หรือไม่

การนำการตรวจจับทางแยกในอดีตเกี่ยวข้องกับตัวจัดการเหตุการณ์และวิธีการเรียกวนรอบเช่น Element.getBoundingClientRect () เพื่อสร้างข้อมูลที่จำเป็นสำหรับทุกองค์ประกอบที่ได้รับผลกระทบ เนื่องจากรหัสทั้งหมดนี้ทำงานบนเธรดหลักแม้แต่หนึ่งในนั้นอาจทำให้เกิดปัญหาประสิทธิภาพการทำงาน เมื่อไซต์เต็มไปด้วยการทดสอบเหล่านี้สิ่งต่างๆอาจดูน่าเกลียดอย่างสิ้นเชิง

ดูตัวอย่างรหัสต่อไปนี้:

var options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

var target = document.querySelector('#listItem');
observer.observe(target);

เบราว์เซอร์ที่ทันสมัยส่วนใหญ่รองรับ IntersectionObserverแต่คุณควรใช้polyfillเพื่อความเข้ากันได้แบบย้อนหลัง

ถ้าคุณสนใจทั้งหน้า คุณสามารถใช้สิ่งนี้:

document.body.getBoundingClientRect().top

หากคุณใช้ jQuery มีฟังก์ชั่นที่สมบูรณ์แบบสำหรับคุณ: .scrollTop ()

เอกสารที่นี่ -> http://api.jquery.com/scrollTop/

หมายเหตุ: คุณสามารถใช้ฟังก์ชั่นนี้เพื่อดึงข้อมูลหรือตั้งค่าตำแหน่ง

ดูเพิ่มเติมได้ที่: http://api.jquery.com/?s=scroll

นี่คือวิธีอื่นในการรับตำแหน่งการเลื่อน

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

ฉันคิดว่าฟังก์ชั่นต่อไปนี้สามารถช่วยให้มีค่าพิกัดเลื่อน:

const getScrollCoordinate = (el = window) => ({
  x: el.pageXOffset || el.scrollLeft,
  y: el.pageYOffset || el.scrollTop,
});

ฉันได้รับแนวคิดนี้จากคำตอบนี้ด้วยการเปลี่ยนแปลงเล็กน้อย