Situs web resmi: http://iscrolljs.com/
Struktur DOM paling sederhana dari Iscroll:
<Div id = "wrapper"> <ul> <li> ... </li> <li> ... </li> ... </ul> </div>
Inisialisasi isCroll
var myscroll = new isCroll ('#wrapper', opsi);Inisialisasi pengaturan
Inisialisasi Pengaturan Contoh Penggunaan:
var myscroll = new isCroll ('#wrapper', {mousewheel: true, scrollbars: true});Daftar Pengaturan:
Milik | Nama atribut | menjelaskan | nilai default |
|---|---|---|---|
Perpustakaan Inti croe | option.usetransform | Apakah akan menggunakan properti transformasi CSS3 | BENAR |
Options.Usetransition | Apakah akan menggunakan properti transisi CSS3, jika tidak gunakan requestanimationfram sebagai gantinya | BENAR | |
opsi.hwompositing | Apakah akan mengaktifkan percepatan perangkat keras | BENAR | |
opsi.Bounce | Apakah akan mengaktifkan efek animasi elastis, matikan untuk mempercepat | BENAR | |
Fitur Dasar Fitur Dasar | opsi.klik | Apakah akan mengaktifkan acara klik. Disarankan untuk mematikan opsi ini dan mengaktifkan acara tap khusus (opsi.tap) | PALSU |
Options.Disablemouse | Apakah akan mematikan deteksi acara mouse. Jika Anda tahu platform mana yang harus dijalankan, Anda dapat mengaktifkannya. | PALSU | |
Options.DisablePointer | Apakah akan mematikan deteksi acara pointer. Jika Anda tahu platform mana yang harus dijalankan, Anda dapat mengaktifkannya. | PALSU | |
Options.DisableTouch | Apakah akan mematikan deteksi acara sentuh. Jika Anda tahu platform mana yang harus dijalankan, Anda dapat mengaktifkannya. | PALSU | |
opsi.eventpassthrough | Saat menggunakan sumbu horizontal IsCroll untuk digulung, jika Anda ingin menggunakan sumbu vertikal sistem untuk bergulir dan berlaku pada sumbu horizontal, silakan nyalakan. Demo Passthrough Acara | PALSU | |
option.freescroll | Ini terutama digunakan ketika keduanya gulir naik, bawah, kiri dan kanan mulai berlaku, dan dapat digulir ke segala arah. Demo Gulir 2D | PALSU | |
Options.KeyBindings | Bind Key Event. Binding kunci | PALSU | |
Options.Invertwheeldirection | Roda mouse terbalik. | PALSU | |
option.momentum | Apakah akan menyalakan animasi startup, matikan untuk meningkatkan efisiensi. | BENAR | |
opsi.mousewheel | Apakah akan mendengarkan acara roda mouse. | PALSU | |
Options.PreventDefault | Apakah akan memblokir acara default. | BENAR | |
Options.scrollbars | Apakah akan menampilkan scrollbar default | PALSU | |
Options.scrollx Options.scrolly | Anda dapat mengatur apakah akan menampilkan bilah gulir horizontal atau vertikal | scrollx false scrolly true | |
opsi.tap | Apakah akan mengaktifkan acara tap khusus Anda dapat menyesuaikan nama acara tap | PALSU | |
Scrollbar Gulir | Options.scrollbars | Apakah akan menampilkan scrollbar default | PALSU |
opsi.fadescrollbars | Apakah akan memudar scrollbar, matikan untuk mempercepat | BENAR | |
Options.InteractivesCrollBars | Dapatkah pengguna menyeret scrollbar | PALSU | |
option.ResizesCrollBars | Apakah akan memperbaiki ukuran batang gulir, disarankan untuk mengaktifkannya saat menyesuaikan bilah gulir. | PALSU | |
Options.ShrinksCrollBars | Apakah akan menyusut bilah gulir saat menggulir melebihi batas gulir. 'Klip': Tpangkangkan scrollbar di luar 'Skala': Scaling Scrollbar secara proporsional (menempati sumber daya CPU) Salah: Tidak ada penyusutan, | PALSU | |
opsi.indikator | Menginstruksikan bagaimana IsCroll harus digulir, implementasi yang mendasari scrollbars. | ||
option.indicators.el | Buat wadah untuk bilah gulir. Elemen pertama dalam wadah adalah indikator. Misalnya: Indikator: { EL: Document.getElementById ('indikator') } Indikator: { EL: '#Indicator' } | ||
option.indicators.ignoreboundaries | Apakah akan mengabaikan batasan kontainer. Setel ke true untuk mengatur kecepatan gulir Demo Parallelax | PALSU | |
option.indicators.listenx option.indicators.listeny | Indikator memantau pengguliran arah itu, yang dapat diatur ke satu atau dua arah. | BENAR | |
option.indicators.speedratiox option.indicators.speedratioy | Kecepatan indikator relatif terhadap bilah gulir utama | 0 | |
option.indicators.fade option.indicators.interactive option.indicators.Hesize option.indicators.shrink | Pengaturan seperti scrollbars Demo minimap | ||
option.probetype | Iscroll-probe.js diperlukan untuk berlaku Probetype: 1 dipicu saat menggulir tidak sibuk Probetype: 2 memicu setiap waktu tertentu saat menggulir Probetype: 3 dipicu sekali per gulir piksel | ||
Snap halaman terpisah | opsi.snap | Secara otomatis membagi kontainer untuk membuat efek dari lentera berputar, dll. Option.snap: true // secara otomatis dibagi sesuai dengan ukuran kontainer Option.snap: el // segmen menurut elemen | PALSU |
Zoom zoom | option.zoom | Apakah akan mengaktifkan zoom Yang terbaik adalah menggunakan iscroll-zoom.js Jika pembesaran kabur, wadah sumber dapat didefinisikan sebagai 2 kali ukuran, dan kemudian skala (0,5) Demo Zoom | PALSU |
Options.zoommax | Level zoom maksimum | 4 | |
Options.zoommin | Level zoom minimum | 1 | |
Options.Startzoom | Level penskalaan awal | 1 | |
opsi.wheelaction | Aksi roller Setel ke 'Zoom', Anda dapat memperbesar dengan roda gulir | belum diartikan | |
Lebih banyak pengaturan | Options.BindTowrapper | Apakah akan berhenti menggulir saat kursor atau sentuhan melebihi wadah | PALSU |
opsi.bouncingeasing | Efek animasi elastis Efek preset: 'kuadratik', 'melingkar', 'kembali', 'bouncing', 'elastis' (dua yang terakhir tidak dapat diekspresikan melalui CSS3) Anda juga dapat menyesuaikan efeknya Bouncingeasing: { Gaya: 'Cubic-Bezier (0,0,1,1)', // CSS3 fn: function (k) {return k; } // Saat menggunakan requestanimationframe, } | 'bundar' | |
Options.Bouncetime | Jumlah milidetik animasi elastis berlangsung | 600 | |
opsi.deceleration | Perpaduan momentum bergulir Semakin besar semakin cepat, harga yang disarankan tidak lebih dari 0,01 | 0,0006 | |
option.mousewheelspeed | Kecepatan roda tikus | ||
Options.PreventDefaultException | Daftar elemen mana yang tidak memblokir acara default; | {tagname: /^(input | textarea | tombol | pilih) $ /} | |
opsi.ResizePolling | Menghitung ulang interval waktu iscroll saat mengubah ukuran jendela | 60 | |
Mengikat kunci | Options.KeyBindings | Dengarkan peristiwa penting untuk mengontrol iscroll Misalnya: KeyBindings: { Pageup: 33, Pagedown: 34, Akhir: 35, Beranda: 36, Kiri: 37, UP: 38, Benar: 39, Down: 40 } | |
IsCroll5 API:
Milik | Nama metode | menjelaskan |
|---|---|---|
menggulir | Scrollto (x, y, waktu, pelonggaran) | Gulir ke: x, y, acara, metode pelonggaran x: int Y: int Waktu: int EASING: Kuadrat | melingkar | kembali | Bounce | elastis Lihat objek isCroll.utils.ease contoh: myscroll.scrollto (0, -100, 1000, isCroll.utils.ease.elastic); |
Scrollby (x, y, waktu, pelonggaran) | Gulir ke suatu tempat relatif terhadap posisi saat ini Sisanya sama seperti di atas | |
ScrollToElement (EL, Time, OffsetX, Offsety, Easing) | Gulir ke suatu elemen. EL adalah parameter yang diperlukan OffsetX/Offsety: Perpindahan relatif terhadap elemen EL. Diatur ke true menjadi pusat layar Gulir ke elemen | |
Snap halaman terpisah | gotopage (x, y, waktu, pelonggaran) | Pisahkan halaman sesuai dengan opsi. XY dapat berlaku secara bersamaan. Gunakan dalam kombinasi dengan opsi.snap |
Berikutnya() prev () | Halaman sebelumnya, halaman berikutnya Gunakan dalam kombinasi dengan opsi.snap | |
Zoom | zoom (skala, x, y, waktu) | Scaling container Skala: Faktor penskalaan |
menyegarkan | menyegarkan() | Segarkan iscroll |
menghancurkan | menghancurkan() | Hancurkan Iscroll dan Simpan Sumber Daya |
Acara Iscroll:
beforescrollstart | Pengguna mengklik di layar, tetapi belum diinisialisasi sebelum menggulir |
|---|---|
Scrollcancel | Batalkan setelah menginisialisasi pengguliran |
Gulir | Mulailah menggulir |
menggulir | Menggulir |
Scrollend | Gulir ujung |
mengibaskan | Ketuk layar kiri dan kanan |
zoomstart | Mulailah penskalaan |
Zoomend | Akhir zoom |
Contoh Penggunaan Acara:
myscroll = new isCroll ('#wrapper'); myscroll.on ('scrollend', dosomething);Properti Iscroll:
myscroll.x/y | Lokasi saat ini |
|---|---|
myscroll.directix/y | Arah pengguliran terakhir kali (-1 turun/kanan, 0 tetap asli, 1 di atas/kiri) |
myscroll.currentpage | Informasi snap saat ini |
myscroll.maxscrollxmyscroll.maxscrolly | myscroll.x/y saat menggulir ke bawah |