Analisis Kode Sumber Bootstrap ScrollSpy (Mendengarkan Gulir)
File kode sumber:
Scrollspy.js
Menerapkan fungsi
1. Ketika hashkey diatur di area gulir mencapai posisi yang valid, item yang ditentukan pada navigasi diatur dalam hubungan.
2. Navigasi harus .Nav> li> struktur, dan hashkey pada href atau target data harus terikat pada hashkey
3. Pasti ada gaya .nav di menu
4. Target data di area gulir harus konsisten dengan ID induk navigasi (harus menjadi induk)
<Div ID = "Selector"> <ul> <li> <a href = "#satu"> satu </a> </li> <li> <a href = "#dua"> dua </a> </li> <li> <a href = "#" tiga "</a> </li> </ul> </div> </data-tping =" uap = "taPREX =" UNTED = "Data =". Overflow: Tersembunyi; overflow-y: auto; " > <h4 id = "satu"> ibe </h4> <p> Satu konten spesifik <br/> satu konten spesifik <br/> satu konten spesifik <br/> satu konten spesifik <br/> </p> <h4 id = "dua"> dua </h4> <p> satu konten spesifik <br/> satu konten spesifik <br/> </p> </h4 id = "tiga" tiga "hm. Konten <br/> </p> <h4 id = "tiga"> tiga </h4> <p> Satu konten spesifik <br/> satu konten spesifik <br/> </p> <h4 id = "tiga"> tiga </h4> <p> satu konten spesifik <br/> satu konten spesifik <br/> satu konten spesifik <br/> </p>
Analisis Kode Sumber:
1. Prinsip: Ketika posisi hashkey dalam wadah gulir hanya nilai yang ditetapkan oleh offset di bagian atas wadah, highlight HREF yang sesuai dalam navigasi akan ditetapkan.
2. Jika area gulir adalah badan, elemen area pengguliran akan ditandai sebagai jendela (dinilai dalam konstruktor)
ini. $ scrolleLement = $ (elemen) .is (document.body)? $ (jendela): $ (elemen)
3. Getscrolheight: Dapatkan ketinggian konten dari wadah gulir (termasuk bagian tersembunyi)
ini. $ scrolleLement [0] .scrollheight || Math.max (ini. $ Body [0] .scrollheight, document.documentelement.scrollheight)
4. Segarkan: Segarkan dan simpan nilai masing -masing hashkey dalam wadah gulir
4.1. Gunakan Offset untuk mendapatkan nilai posisi secara default. Jika area gulir bukan jendela, gunakan posisi untuk mendapatkannya.
if (! $. isWindow (this. $ scrollelement [0])) {offsetMethod = 'position' offsetbase = this. $ scrollement.scrolltop () // Dapatkan ketinggian dasar, jika ada konten di area gulir yang tidak berpartisipasi dalam perhitungan gulir}4.2. Menurut hashkey pada navigasi, traversal dan mendapatkan nilai offset yang sesuai dengan hashkey di area pengguliran:
this.$body .find(this.selector) .map(function () { var $el = $(this) var href = $el.data('target') || $el.attr('href') var $href = /^#./.test(href) && $(href) //Get the element corresponding to the hashkey in the scrolling area return ($href && $ href.length && $ href.is (': visible') && [[$ href [offsetMethod] (). Top + offsetbase, href]]) || itu.targets.push (ini [1])})5. Proses: Fungsi pemicu acara scrollbar digunakan untuk menghitung menu navigasi mana yang perlu disorot saat ini
5.1. Dapatkan jarak gulir dari wadah gulir:
var scrolltop = this. $ scrollelement.scrolltop () + this.options.offset
5.2. Tinggi maksimum yang dapat digulung oleh wadah bergulir
// Maksimum Gulir Tinggi = Jarak Pengaturan Gulir (Offset) + Gulir Konten Kontainer Tinggi - Gulir Pengaturan Kontainer Tinggi Var Maxscroll = This.Options.Offset + ScrollHeight - This. $ Scrollelement.height ()
5.3. Atur logika elemen gulir:
untuk (i = offsets.length; i--;) {// Transfer semua Offset ActiveTarget! = Target [i] // menilai apakah target saat ini sama dengan ActiveTarget && scrolltop> = offset [i] // tidak ada, atau Offset (i + 1] ===== NOT SCROLLTOP, atau SCROLLTOP, orsets [i + 1] ==== elemen i+1 tidak lebih besar dari tinggi gulir && this.activate (target [i]) // set i sebagai item aktif saat ini}6. Aktif: Atur menu navigasi yang ditentukan untuk disorot
7. CLEAR: CLEAR SEMUA MENU yang disorot
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.