in view

ใน view.js ?

รับการแจ้งเตือนเมื่อองค์ประกอบ DOM เข้าหรือออกจากวิวพอร์ต ยูทิลิตี้จาวาสคริปต์ขนาดเล็ก (~1.9kb gzipped) ที่ไม่ต้องใช้การพึ่งพาสำหรับ IE9+

camwiegert.github.io/ในมุมมอง

---

การติดตั้ง

ดาวน์โหลดรุ่นล่าสุดและรวมไว้ในมาร์กอัปของคุณหรือติดตั้งด้วย npm:

npm install --save in-view

---

การใช้งานขั้นพื้นฐาน

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

 inView ( '.someSelector' )
    . on ( 'enter' , doSomething )
    . on ( 'exit' , el => {
        el . style . opacity = 0.5 ;
    } ) ; 

---

เอพีไอ

ในมุมมองจะรักษารีจิสทรีของตัวจัดการแยกต่างหากสำหรับชุดองค์ประกอบแต่ละชุดที่บันทึกด้วย inView(<selector>) รีจิสทรีแต่ละรายการจะแสดงวิธีเดียวกันสี่วิธี ในมุมมองยังเปิดเผยวิธีการระดับบนสุดสี่วิธี ( is , offset , threshold , test )

inView(<ตัวเลือก>).on(<เหตุการณ์>, <ตัวจัดการ>)

ลงทะเบียนตัวจัดการให้กับองค์ประกอบที่เลือกโดย selector สำหรับ event เหตุการณ์เดียวที่ปล่อยออกมาในมุมมองคือ 'enter' และ 'exit'

 inView ( '.someSelector' ) . on ( 'enter' , doSomething ) ;

inView(<selector>).once(<เหตุการณ์>, <ตัวจัดการ>)

ลงทะเบียนตัวจัดการให้กับองค์ประกอบที่เลือกโดย selector สำหรับ event ตัวจัดการที่ลงทะเบียนด้วย once จะถูกเรียกเพียงครั้งเดียวเท่านั้น

 inView ( '.someSelector' ) . once ( 'enter' , doSomething ) ;

inView.is(<องค์ประกอบ>)

ตรวจสอบว่า element อยู่ในวิวพอร์ตหรือไม่

 inView . is ( document . querySelector ( '.someSelector' ) ) ;
// => true

inView.offset(<ออฟเซ็ต>)

ตามค่าเริ่มต้น ในมุมมองจะพิจารณาบางสิ่งในวิวพอร์ตหากทำให้ขอบของวิวพอร์ตเสียหาย ซึ่งสามารถใช้เพื่อตั้งค่าออฟเซ็ตจากขอบนั้นได้ ตัวอย่างเช่น ค่าออฟเซ็ต 100 จะพิจารณาองค์ประกอบในวิวพอร์ต หากทำให้ขอบของวิวพอร์ตขาดอย่างน้อย 100 พิกเซล offset อาจเป็นจำนวนเต็มบวกหรือลบก็ได้

 inView . offset ( 100 ) ;
inView . offset ( - 50 ) ;

ออฟเซ็ตสามารถตั้งค่าต่อทิศทางได้โดยการส่งผ่านวัตถุ

 inView . offset ( {
    top : 100 ,
    right : 75 ,
    bottom : 50 ,
    left : 25
} ) ;

inView.threshold(<เกณฑ์>)

กำหนดอัตราส่วนของความสูง และ ความกว้างขององค์ประกอบที่ต้องมองเห็นจึงจะพิจารณาในวิวพอร์ต ค่าเริ่มต้นนี้เป็น 0 ซึ่งหมายถึงจำนวนเงินใดๆ ก็ได้ เกณฑ์ที่ 0.5 หรือ 1 จะต้องมองเห็นความสูงและความกว้างขององค์ประกอบครึ่งหนึ่งหรือทั้งหมดตามลำดับ threshold ต้องเป็นตัวเลขระหว่าง 0 ถึง 1

 inView . threshold ( 0 ) ;
inView . threshold ( 0.5 ) ;
inView . threshold ( 1 ) ;

inView.test(<ทดสอบ>)

แทนที่เกณฑ์การมองเห็นเริ่มต้นของมุมมองด้วยฟังก์ชันที่กำหนดเอง ฟังก์ชันนี้จะได้รับองค์ประกอบและวัตถุตัวเลือกเป็นเพียงสองอาร์กิวเมนต์เท่านั้น คืนค่า true เมื่อองค์ประกอบควรถือว่ามองเห็นได้และ false หากไม่เช่นนั้น

 inView . test ( ( el , options ) => {
    // ...
} ) ;

inView(<ตัวเลือก>).ตรวจสอบ()

ตรวจสอบสถานะขององค์ประกอบที่เลือกโดย selector ด้วยตนเอง ตามค่าเริ่มต้น รีจิสทรีทั้งหมดจะถูกตรวจสอบใน scroll resize และ load เหตุการณ์ของ window

 inView ( '.someSelector' ) . check ( ) ;

inView(<ตัวเลือก>).emit(<เหตุการณ์>, <องค์ประกอบ>)

ปล่อย event ด้วยตนเองสำหรับองค์ประกอบเดียว

 inView ( '.someSelector' ) . emit ( 'exit' , document . querySelectorAll ( '.someSelector' ) [ 0 ] ) ; 

---

รองรับเบราว์เซอร์

ในมุมมองรองรับเบราว์เซอร์สมัยใหม่ทั้งหมดและ IE9+

คำเตือนเล็กๆ น้อยๆ ในมุมมองจะใช้ MutationObserver เพื่อตรวจสอบการมองเห็นองค์ประกอบที่ลงทะเบียนไว้หลังการเปลี่ยนแปลง DOM หากนั่นคือฟังก์ชันที่คุณต้องการใน IE9-10 ให้พิจารณาใช้โพลีฟิล

---

ผลงาน

ไลบรารีใดก็ตามที่เฝ้าดูเหตุการณ์การเลื่อนจะเสี่ยงต่อประสิทธิภาพของเพจที่ลดลง เพื่อบรรเทาปัญหานี้ ในปัจจุบัน ในมุมมองจะลงทะเบียนเฉพาะ Listener เหตุการณ์ที่มีการควบคุมปริมาณ (สูงสุดหนึ่งครั้งทุกๆ 100 มิลลิวินาที) บนแต่ละเหตุการณ์ load resize และ scroll ของ window และใช้สิ่งเหล่านั้นเพื่อเรียกใช้การตรวจสอบในรีจิสทรีแต่ละรายการ

การใช้ IntersectionObserver

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

---

ใบอนุญาต เอ็มไอที