ملف رمز المصدر:
scrollspy.js
تنفيذ الوظائف
1. عندما يصل Hashkey في منطقة التمرير إلى الوضع الصحيح ، يتم تعيين العنصر المحدد في التنقل في الارتباط.
2. يجب أن يكون الملاحة .nav> li> هيكل ، ويجب أن يكون Hashkey على HREF أو مستهدف البيانات مرتبطًا بـ Hashkey
3. يجب أن يكون هناك نمط .NAV في القائمة
4. يجب أن يكون هدف البيانات في منطقة التمرير متسقًا مع معرف الوالدين التنقل (يجب أن يكون الوالد)
<div id = "selector"> <ul> <li> <a href = "#one"> one </a> </li> <li> <a href = "#two"> اثنان </a> </li> <li> <li> <a href = "#three"> ثلاثة </a> </li> </ul> </div-spy = "data". الفطائر: مخفية ؛ فاخرة y: auto ؛ " > <h4 id = "One"> ibe </h4> <p> محتوى محدد واحد <br/> محتوى واحد محدد <br/> محتوى واحد محدد <br/> محتوى واحد محدد <br/> </p> <h4 id = "two" المحتوى <br/> </p> <h4 id = "three"> ثلاثة </h4> <p> محتوى محدد واحد <br/> محتوى واحد محدد <br/> </p>
تحليل رمز المصدر:
1. المبدأ: عندما يكون موضع hashkey في حاوية التمرير هو فقط القيمة التي تم تحديدها عن طريق الإزاحة في الجزء العلوي من الحاوية ، سيتم تعيين تسليط الضوء على HREF المقابل في التنقل.
2. إذا كانت منطقة التمرير هي جسم ، فسيتم تمييز عنصر منطقة التمرير كنافذة (يتم الحكم عليها في المنشئ)
هذا. $ scrollelement = $ (element) .is (document.body)؟ $ (نافذة): $ (عنصر)
3. GetScrolheight: احصل على ارتفاع المحتوى لحاوية التمرير (بما في ذلك الجزء المخفي)
هذا. $ scrollelement [0] .Scrollheight || Math.Max (هذا. $ body [0]
4. تحديث: تحديث وتخزين قيم كل hashkey في حاوية التمرير
4.1. استخدم الإزاحة للحصول على قيمة تحديد المواقع افتراضيًا. إذا لم تكن منطقة التمرير نافذة ، فاستخدم الموضع للحصول عليها.
if (! $. isWindow (هذا. $ scrollelement [0])) {OffsetMethod = 'position' OffsetBase = this. $ scrollement.scrolltop () // احصل على ارتفاع الأساس ، إذا كان هناك محتوى في منطقة التمرير التي لا تشارك في حساب التمرير}}4.2. وفقًا لـ Hashkey على التنقل ، فإن اجتيازًا واحصل على قيمة الإزاحة المقابلة لـ Hashkey في منطقة التمرير:
هذا. $ href.length && $ href.is (': visible') && [[$ href [OffsetMethod] (). that.targets.push (هذا [1])})5. العملية: يتم استخدام وظيفة مشغل أحداث Scrollbar لحساب قائمة التنقل التي يجب تمييزها حاليًا
5.1. احصل على مسافة التمرير من حاوية التمرير:
var scrolltop = this. $ scrollelement.scrolltop () + this.options.offset
5.2. الحد الأقصى للارتفاع الذي يمكن أن تدحرج الحاوية المتداول
// أقصى ارتفاع قابل للتمرير = مسافة إعداد التمرير (الإزاحة) + ارتفاع محتوى الحاوية - SCROLL STINER STINE VAR MAXSCROLL = this.options.offset + scrollheight - this. $ sclollelement.height ()
5.3. تعيين منطق عنصر التمرير:
لـ (i = Offes.Length ؛ i-- ؛) {// نقل جميع الإزاحة activeTarget! = الأهداف [i] // upply ما إذا كان الهدف الحالي مساوياً لـ activetarget && scrolltop> = Offects [i] العنصر i+1 ليس أكبر من ارتفاع التمرير && this.Active (أهداف [i]) // set I كبند نشط حالي}6. نشط: اضبط قائمة التنقل المحددة لتسليط الضوء
7. واضح: مسح كل القوائم المميزة
المقالة أعلاه تناقش باختصار تحليل رمز مصدر bootstrap scrollspy (التمرير للاستماع) هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.