ringkasan
Versi IsCroll 4 ini sepenuhnya menulis ulang kode asli dari kerangka kerja IsCroll. Proyek ini dibuat sepenuhnya karena penggunaan browser webkit seluler yang meluas (seperti iPhone, iPad, Android)
Cara terlokalisasi untuk menggeser konten elemen yang mendefinisikan tinggi dan lebar disediakan. Sayangnya, dalam hal ini, semua halaman aplikasi web tidak dapat berisi header, akhir halaman atau konten yang dapat digulir dengan posisi: absolut.
Area Tengah.
Namun, revisi terbaru dari sistem Android sudah dapat mendukung fitur ini (meskipun dukungannya tidak terlalu bagus), dan Apple tampaknya enggan menerapkan acara slide satu jari ke elemen Div.
Selain fitur -fitur iscroll versi sebelumnya, IsCroll 4 juga mencakup fitur -fitur berikut:
(1) Zoom (Pinch/Zoom)
(2) Tarik ke atas/ke bawah untuk menyegarkan
(3) Kecepatan dan peningkatan kinerja
(4) Elemen menangkap secara akurat
(5) Scrollbar khusus
Tips Friendly: IsCroll 4 bukan alternatif sederhana untuk IsCroll 3, dan dokumentasi API sudah berbeda. Juga mempertimbangkan bahwa versi ini dalam beta, beberapa API mungkin memiliki perubahan kecil.
Panduan Pengguna
Dalam dokumen ini Anda akan menemukan banyak contoh untuk mengajari Anda cara memulai dengan cepat dengan perpustakaan skrip iScroll. Mungkin agak membosankan untuk merujuk pada contoh demo dalam artikel dan membaca dokumen ini dengan cermat, tetapi artikel ini adalah inti dari perpustakaan skrip iscroll.
IsCroll perlu menginisialisasi elemen yang akan digulir, dan tidak membatasi jumlah elemen menggunakan isCroll di halaman (konfigurasi perangkat keras Anda tidak dipertimbangkan di sini). Jenis dan panjang konten dalam elemen gulir akan mempengaruhi pustaka skrip isCroll sampai batas tertentu
Jumlah elemen yang dapat digunakan secara bersamaan.
Saat menggunakan pustaka skrip isCroll, struktur pohon DOM harus cukup sederhana untuk menghapus tag yang tidak perlu dan mencoba menghindari sarang tag yang berlebihan.
Struktur optimal menggunakan isCroll adalah sebagai berikut:
<Div id = "wrapper"> <ul> <li> </li> ...... </ul> </div>
Dalam contoh kecil ini, tag UL akan digulir. Iscroll harus terhubung ke pembungkus di luar konten pengguliran untuk menghasilkan hasil.
【Tindakan pencegahan】:
Hanya elemen anak pertama dalam pembungkus yang dapat digulir. Jika Anda ingin lebih banyak elemen gulir, maka Anda dapat mencoba metode penulisan berikut:
<Div id = "wrapper"> <div id = "scroller"> <ul> <li> </li> ... </ul> <ul> <li> </li> ... </ul> </div> </div>
Dalam contoh ini, elemen gulir dapat digulir bahkan jika berisi dua elemen UL
Iscroll harus dipakai sebelum menelepon, Anda dapat membuat isCroll dalam kasus -kasus berikut:
(1) Gunakan acara OndomContentloaded untuk mencapai pengguliran
Cocok untuk menggulir konten hanya berisi teks dan gambar, dan semua gambar memiliki ukuran tetap
<skrip src = "isCroll.js"> </script> <script> var myscroll; fungsi dimuat () {myscroll = new isCroll ("wrapper"); } window.addeventListener ("domcontentloaded", dimuat, false); </script>Catatan: Variabel myscroll bersifat global, jadi Anda dapat menyebutnya di mana saja
(2) Gunakan acara Onload untuk mencapai gulir
Karena peristiwa DOMContentloaded akan dipanggil setelah memuat struktur DOM, panjang dan lebar area gulir mungkin tidak ditentukan sebelum elemen seperti gambar tidak dimuat. Pada saat ini, acara Onload dapat diimplementasikan.
<skrip src = "isCroll.js"> <script> <script> var myscroll; fungsi dimuat () {setTimeout (function () {myscroll = new isCroll ("wrapper");}, 100); } window.addeventListener ("muat", dimuat, salah); </script>Dalam hal ini, isCroll akan diinisialisasi setelah sumber daya halaman (termasuk gambar) dimuat 100 ms. Ini harus menjadi cara yang relatif aman untuk memanggil Iscroll.
(3) Inisialisasi inline
Situasi ini akan dipanggil ketika halaman dimuat ke JS. Metode ini tidak disarankan, tetapi banyak petinggi JavaScript menggunakan metode ini. Alasan apa yang harus saya tidak setuju?
<skrip src = "isCroll.js"> </script> <div id = "wrapper"> <ul> <li> </li> ... </ul> </div> <script> var myscroll = isCroll baru ("wrapper"); </script>Namun, Anda disarankan untuk menggunakan beberapa metode siap kerangka kerja untuk memanggil Iscroll (seperti siap () di jQuery) dengan aman.
Parameter yang diteruskan di Iscroll
Parameter kedua dalam isCroll memungkinkan Anda untuk menyesuaikan beberapa konten, seperti kode berikut:
<script> var myscroll = new isCroll ("wrapper", {hscrollbar: false, vscrollbar: false}); </cript>Parameter kedua biasanya merupakan objek. Misalnya, bilah gulir tidak ditampilkan dalam contoh di atas. Parameter yang umum digunakan adalah sebagai berikut:
hscroll false melarang gulir horizontal menggulir secara horizontal default ke true
vscroll false gulir vertikal gulir true gulir vertikal default ke true
Hscrollbar False menyembunyikan scrollbars ke arah horizontal
vscrollbar False Hide Scrollbar ke arah vertikal
FixedScrollBar pada sistem iOS, ketika elemen seret melebihi batas scroller, scrollbar menyusut. Diatur ke true untuk mencegah scrollbar melebihi scroller.
Area gulir yang terlihat. Default benar di android dan false di iOS
fadescrollbar false menentukan untuk menyembunyikan scrollbar saat tidak ada efek memudar
hidescrollbar menyembunyikan scrollbar ketika tidak ada interaksi pengguna default ke true
Bounce mengaktifkan atau menonaktifkan bouncing batas, default ke true
Momentum memungkinkan atau menonaktifkan inersia, default ke true, parameter ini sangat berguna ketika Anda ingin menyimpan sumber daya.
Lockdirection False membatalkan penguncian arah seret, drag true hanya bisa dalam satu arah (atas/bawah atau kiri/kanan)
Pencapaian berbagai efek
Gulir penyegaran 'tarik untuk menyegarkan' demo
Efek ini telah menjadi sangat populer sejak Twitter dan beberapa aplikasi lokal Apple telah muncul. Anda bisa melihatnya di sini.
Dalam versi terbaru, penulis memisahkan bagian "Tarik ke Refresh" sebagai plug-in tambahan untuk IsCroll. Anda dapat mengklik di sini untuk melihat cara menarik untuk menyegarkan bekerja. Yang perlu Anda lakukan adalah menyesuaikan metode pullDownaction (). Anda mungkin memerlukan AJAX untuk memuat konten baru, tetapi ingat untuk memanggil refresh setelah pohon DOM berubah. Harus diingat bahwa dalam contoh kami menambahkan penundaan 1 detik untuk mensimulasikan efek penundaan jaringan. Tentu saja, jika Anda tidak ingin menggunakan penundaan ini, cukup hapus metode SetTimeout.
Zoom (Pinch / Zoom) 'Tarik untuk menyegarkan' demo
Kita harus menghadapi kenyataan bahwa hanya bergulir sebenarnya bukanlah hal baru. Inilah sebabnya dalam versi ISCROLL 4 inilah kami mengizinkan Anda untuk meletakkannya
Besar dan menyusut. Untuk menginginkan fungsi ini, Anda hanya perlu mengatur parameter zoom ke true untuk menggunakan gerakan untuk memperbesar dan keluar. Anda bisa melihatnya di sini.
Klik dua kali untuk memperbesar dan keluar juga didukung dalam IsCroll 4. Untuk menggunakan fungsi zoom, Anda membutuhkan setidaknya konfigurasi berikut:
var myscroll = new isCroll ("wrapper", {zoom: true});
Jika Anda ingin menyesuaikan fungsi zoom secara mendalam, Anda dapat menggunakan beberapa opsi berikut:
Zoommax Menentukan kelipatan maksimum yang memungkinkan pembesaran, default adalah 4
[Catatan]: Jika Anda ingin penskalaan gambar menjadi efektif, Anda harus memasukkannya ke dalam lapisan sintesis perangkat keras. Dalam istilah awam, itu adalah menggunakan -webkit -transform: translate3d (0,0,0) pada semua elemen IMG yang perlu ditingkatkan. Dan sangat penting bahwa akselerasi perangkat keras akan mengambil banyak sumber daya dan harus digunakan dengan hati -hati, jika tidak, aplikasi Anda mungkin macet.
Snap dan snap to element 'carousel' demo
Fungsi SNAP adalah untuk menentukan apakah elemen slide ke posisi yang ditentukan. Efek ini memungkinkan Anda untuk membuat efek tenda mewah.
Plug-in akan secara otomatis menganalisis elemen-elemen dari label yang sama atau ukuran yang sama di area gulir seperti objek penangkapan, dan Anda juga dapat menentukan objek yang ditangkap melalui parameter.
var myscroll = new isCroll ("wrapper", {snap: true, momentum: false, hscrollbar: false, vscrollbar: false});Anda dapat mengatur objek SNAP dengan mengatur parameter Snap ke tag yang ditentukan. Misalnya, tangkap tag LI.
var myscroll = new isCroll ("wrapper", {snap: "li", momentum: false, hscrollbar: false, vscrollbar: false});Dalam contoh ini, scroller dapat menangkap elemen paling kiri paling kiri di area gulir
Gulir Kustom
Dalam IsCroll 4, serangkaian CSS dapat digunakan untuk menyesuaikan rendering scrollbars. Anda dapat menambahkan parameter kelas ke bilah gulir, sebagai berikut:
var myscroll = new isCroll ("wrapper", {scrollbarclass: "myscrollbar"});Perlu dicatat bahwa bilah gulir terdiri dari dua elemen: wadah dan layar. Wadah adalah ketinggian yang sama dengan pembungkus, sedangkan layar mewakili scrollbar itu sendiri.
Struktur HTML dari bilah gulir adalah sebagai berikut:
<dv> <verv> </div> </div> .myscrollbarv {position: absolute; z-index: 100; lebar: 8px; bawah: 7px; atas: 2px; kanan: 1px; } .myscrollbarv> div {position: absolute; z-index: 100; lebar: 100%; / * Berikut ini mungkin adalah apa yang ingin Anda sesuaikan */latar belakang: -webkit-gradient (linear, 0 0, 100% 0, dari (#f00), ke (#900)); perbatasan: 1px solid#800; -webkit-background-klip: padding-box; -webkit-box-sizing-sizing: boord-box-box-box-box-box:-padding-box; 1px 1px 0 RGBA (255.255.255.0.5); }Metode Umum:
(1) Segarkan metode ini harus dipanggil saat pohon DOM berubah
misalnya: setTimeout (function () {myscroll.refresh ();}, 0);
(2) IsCroll juga menyediakan tiga metode: ScrollTo, ScrollToElement dan Scrolltopage, sehingga Anda dapat mengontrol efek pengguliran melalui JavaScript.
Scrollto (x, y, waktu, relatif): Biarkan posisi scrollbar x/y konten dalam waktu yang ditentukan. Misalnya, myscroll.scrollto (0, -100, 200) menggulir ke bawah dengan 100 piksel dalam 200 milidetik. myscroll.scrollto (0, 10, 200, true) dapat mencapai efek menggulir 10 piksel pada sumbu y dalam waktu 200 milidetik relatif terhadap posisi saat ini.
ScrollToElement (elemen, waktu): Gulir ke elemen yang ditentukan dalam waktu yang ditentukan. Misalnya, myscroll.scrolltoElement ('li: nth-child (10)', 100) menggulir ke posisi elemen Li ke-10 dalam 100 milidetik. Parameter pertama dapat digunakan untuk memfilter elemen dengan pemilih di CSS3.
Snaptopage (Pagex, Pagey, Time): Gulir dari halaman 1 ke halaman 2 dalam 200 milidetik (0 mewakili halaman 1, 1 mewakili halaman 2). Fungsi ini dapat dipanggil saat menggunakan fungsi SNAP.
(3) Detroy () sepenuhnya menghilangkan myscroll dan ruang memori yang ditempati
misalnya: myscroll.destroy ();
myscroll = null;
Arah pengembangan iscroll
Formulir Dukungan Domain
Optimasi penskalaan
Kompatibilitas browser desktop yang lebih baik
Optimalisasi Acara Onscrol
Perubahan dalam menambahkan nilai hash
Refresh otomatis setelah perubahan DOM