การวิเคราะห์ซอร์สโค้ด bootstrap scrollspy (การฟังเลื่อน)
ไฟล์ซอร์สโค้ด:
scrollspy.js
ใช้ฟังก์ชั่น
1. เมื่อแฮชคีย์ตั้งค่าในพื้นที่การเลื่อนถึงตำแหน่งที่ถูกต้องรายการที่ระบุในการนำทางของมันจะถูกตั้งค่าในการเชื่อมโยง
2. การนำทางจะต้องเป็น. nav> li> โครงสร้างและแฮชคีย์บน HREF หรือเป้าหมายข้อมูลจะต้องถูกผูกไว้กับแฮชคีย์
3. ต้องมีสไตล์. nav ในเมนู
4. เป้าหมายข้อมูลในพื้นที่การเลื่อนควรสอดคล้องกับรหัสผู้ปกครองการนำทาง (ต้องเป็นพาเรนต์)
<div id = "ตัวเลือก"> <ul> <li> <a href = "#one"> หนึ่ง </a> </li> <li> <a href = "#สอง"> สอง </a> </li> <li> <a href = "#สาม"> สาม </a> </li> style = "ความสูง: 100px; overflow: ซ่อน; overflow-y: auto;" > <h4 id = "หนึ่ง"> ibe </h4> <p> เนื้อหาเฉพาะหนึ่งเนื้อหา <br/> เนื้อหาเฉพาะหนึ่งเนื้อหา <br/> เนื้อหาเฉพาะหนึ่งเนื้อหา <br/> เนื้อหาเฉพาะหนึ่งเนื้อหา <br/> </p> <h4 id = "สอง"> สอง </h4> <p> เนื้อหาเฉพาะหนึ่งรายการ <br/> เนื้อหาเฉพาะหนึ่ง เนื้อหา <br/> </p> <h4 id = "สาม"> สาม </h4> <p> เนื้อหาเฉพาะหนึ่งเนื้อหา <br/> เนื้อหาเฉพาะหนึ่งรายการ <br/> </p> <h4 id = "สาม"> สาม </h4> <p> เนื้อหาเฉพาะหนึ่งรายการ <br/> เนื้อหาเฉพาะหนึ่งรายการ <br/>
การวิเคราะห์ซอร์สโค้ด:
1. หลักการ: เมื่อตำแหน่งแฮชคีย์ในคอนเทนเนอร์เลื่อนเป็นเพียงค่าที่กำหนดโดยการชดเชยที่ด้านบนของคอนเทนเนอร์ HREF ที่สอดคล้องกันที่เน้นในการนำทางจะถูกตั้งค่า
2. หากพื้นที่การเลื่อนเป็นร่างกายองค์ประกอบพื้นที่การเลื่อนจะถูกทำเครื่องหมายเป็นหน้าต่าง (ตัดสินในตัวสร้าง)
สิ่งนี้. $ scrollElement = $ (องค์ประกอบ) .is (document.body)? $ (หน้าต่าง): $ (องค์ประกอบ)
3. GetScrolheight: รับความสูงของเนื้อหาของคอนเทนเนอร์ Scroll (รวมถึงส่วนที่ซ่อนอยู่)
สิ่งนี้. $ scrollelement [0] .Scrollheight || math.max (นี่ $ body [0] .scrollheight, document.documentelement.scrollheight)
4. รีเฟรช: รีเฟรชและจัดเก็บค่าของแฮชคีย์แต่ละตัวในคอนเทนเนอร์สโครล
4.1. ใช้ออฟเซ็ตเพื่อรับค่าตำแหน่งตามค่าเริ่มต้น หากพื้นที่การเลื่อนไม่ใช่หน้าต่างให้ใช้ตำแหน่งเพื่อรับ
if (! $. iswindow (นี่. $ scrollelement [0])) {OffsetMethod = 'ตำแหน่ง' OffsetBase = this. $ scrollelement.scrolltop () // รับความสูงพื้นฐานหากมีเนื้อหาในพื้นที่เลื่อน4.2. ตามแฮชคีย์ในการนำทางทราเวอเรลและรับค่าออฟเซ็ตที่สอดคล้องกับแฮชคีย์ในพื้นที่เลื่อน:
สิ่งนี้. $ body .find (this.Selector) .map (function () {var $ el = $ (นี่) var href = $ el.data ('target') || $ el.attr ('href') var $ href = /^#./.test(Href) && $ (href) // $ href.length && $ href.is (': visible') && [[$ href [OffsetMethod] (). top + OffsetBase, href]]) || null}) .sort (ฟังก์ชั่น (a, b) {return a [0] that.targets.push (นี้ [1])})5. กระบวนการ: ฟังก์ชั่นทริกเกอร์เหตุการณ์ Scrollbar ใช้ในการคำนวณว่าจะต้องมีการเน้นเมนูนำทางใดในขณะนี้
5.1. รับระยะการเลื่อนของคอนเทนเนอร์เลื่อน:
var scrolltop = this. $ scrollelement.scrolltop () + this.options.offset
5.2. ความสูงสูงสุดที่ภาชนะกลิ้งสามารถม้วนได้
// ความสูงสูงสุดเลื่อนได้ = ระยะการตั้งค่าการเลื่อน (ออฟเซ็ต) + ความสูงของคอนเทนเนอร์คอนเทนเนอร์ - คอนเทนเนอร์ - การตั้งค่าคอนเทนเนอร์ความสูง
5.3. ตั้งค่าตรรกะองค์ประกอบการเลื่อน:
สำหรับ (i = offsets.length; i--;) {// โอน activetarget ออฟเซ็ตทั้งหมด! = เป้าหมาย [i] // ตัดสินว่าเป้าหมายปัจจุบันเท่ากับ ActivetArget && scrolltop> = Offsets [i] // scroll ความสูง> onfset && องค์ประกอบ i+1 ไม่เกินความสูงของการเลื่อน && this.activate (เป้าหมาย [i]) // set i เป็นรายการที่ใช้งานปัจจุบัน}6. ใช้งานอยู่: ตั้งค่าเมนูการนำทางที่ระบุเป็นไฮไลต์
7. เคลียร์: ล้างเมนูที่เน้นทั้งหมด
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript