jQuery mencipta bar skrol Mac Lion OS tiruan effect

jQuery mencipta bar skrol Mac Lion OS tiruan effect_jquery

WBOY

Lepaskan： 2016-05-16 16:14:32

asal

1356 orang telah melayarinya

nanoScrollerJS ialah pemalam jQuery yang menggunakan cara mudah untuk mencapai kesan bar skrol sistem Mac OS X Lion. Pemalam bar skrol ini menggunakan struktur HTML minimum .nano > Elemen bar skrol lain .pane > .nano-slider dimuatkan secara dinamik apabila pemalam sedang berjalan. Pemalam bar skrol ini menggunakan bar skrol asli untuk berfungsi pada iPad, iPhone dan beberapa Tablet Android.

Cara menggunakan

struktur HTML

Berikut ialah struktur HTML yang diperlukan untuk pemalam bar skrol berfungsi:

Salin kod Kod adalah seperti berikut:

... kandungan di sini ...

Nama kelas kandungan nano dan nano boleh ditukar melalui parameter pemalam (selepas perubahan, fail CSS pemalam juga mesti ditukar sewajarnya).

Gaya CSS

Perkenalkan fail nanoscroller.css ke dalam HTML

Salin kod Kod adalah seperti berikut:

Anda perlu menentukan lebar dan ketinggian untuk bekas dan menyesuaikan beberapa gaya asas untuk bar skrol anda, contohnya:

Salin kod Kod adalah seperti berikut:

.nano { latar belakang: #bba;
.nano > .nano-content { padding: 10px;
.nano > .nano-pane { latar belakang: #888;
.nano > .nano-pane > .nano-slider { background: #111;

JAVASCRIPT

Perkenalkan fail jquery.nanoscroller.js ke dalam halaman.

Salin kod

Kod adalah seperti berikut:

Kemudian gunakan kaedah berikut untuk memanggil pemalam bar skrol Kaedah ini akan digunakan pada semua elemen DOM dengan .nano dalam HTML: 

Salin kod

Kod adalah seperti berikut: $(".nano").nanoScroller();

Kaedah lanjutan

Tatal ke atas:

Salin kod

Kod adalah seperti berikut: $(".nano").nanoScroller({ tatal: 'atas' });

Tatal ke bawah:

Salin kod

Kod adalah seperti berikut: $(".nano").nanoScroller({ tatal: 'bawah' });

Tatal ke atas dengan offset:

Salin kod

Kod adalah seperti berikut: $(".nano").nanoScroller({ scrollTop: value });

Tatal ke bawah dengan offset:

Salin kod

Kod adalah seperti berikut: $(".nano").nanoScroller({ scrollBottom: value });

Tatal elemen:

Salin kod

Kod adalah seperti berikut: $(".nano").nanoScroller({ tatalKe: $('#a_node') });

Berhenti menatal. Pilihan ini akan membatalkan semua peristiwa terikat pemalam bar skrol dan menyembunyikan bar skrol daripada UI. 

Salin kod

Kod adalah seperti berikut: $(".nano").nanoScroller({ stop: true });

musnahkan

Hancurkan bar skrol nanoScroller dan tetapkan semula bar skrol ke bar skrol asli penyemak imbas:

Salin kod Kod adalah seperti berikut:

$(".nano").nanoScroller({ musnahkan: benar });

Tetapkan bar skrol kepada berkelip Masa berkelip ditetapkan mengikut parameter (lalai 1.5 saat).

Salin kod Kod adalah seperti berikut:

$(".nano").nanoScroller({ flash: true });

nanoScroller();

Segarkan semula bar skrol. Operasi ini hanya akan mengira semula kedudukan dan ketinggian bar skrol:

Salin kod Kod adalah seperti berikut:

$(".nano").nanoScroller();

Acara tersuai

tatal tatal

Peristiwa tamat tatal tersuai akan dicetuskan setiap kali bar tatal menatal ke bahagian bawah bekas. (Apabila bar skrol telah sampai ke bahagian bawah bekas, acara ini tidak akan dicetuskan apabila pengguna menatal semula)

Salin kod Kod adalah seperti berikut:

$(".nano").bind("scrollend", fungsi(e){

console.log("HTMLDivElement semasa", e.currentTarget);

});

Sesetengah penyemak imbas akan mencetuskan acara ini beberapa kali pada masa yang sama, jadi jQuery .bind atau .on harus digunakan untuk mengikat acara ini. Anda boleh menggunakan pemalam jquery-debounce untuk menyebabkan penyemak imbas mencetuskan acara ini setiap 100 milisaat:

Salin kod Kod adalah seperti berikut:

$(".nano").debounce("scrollend", function() {

makluman("Akhirnya");

}, 100);

atas skrol

Sama seperti acara tatal tatal, ia dicetuskan setiap kali pengguna menatal ke bahagian atas bekas.

Acara tatal tatal adalah sama seperti acara atas tatal, ia menyala setiap kali pengguna menatal. Acara ini disertakan dengan parameter objek js kedudukan semasa, ketinggian maksimum dan arah (atas atau bawah) bar skrol:

Salin kod Kod adalah seperti berikut:

$(".nano").on("kemas kini", fungsi(acara, nilai){ 

console.debug( values ​​​​);

});

Parameter konfigurasi

Terdapat satu set parameter tersedia dalam pemalam bar skrol ini:

iOSNativeScrolling

Jika anda mahu menggunakan bar skrol asli dalam iOS 5, anda boleh menetapkannya kepada benar . Bar skrol asli akan berfungsi lebih baik dalam iOS 5.

Perhatikan bahawa apabila iOSNativeScrolling ditetapkan kepada benar, .pane dan .slider tidak akan dijana/ditambah oleh peranti untuk menyokong bar skrol asli.

Nilai lalai: palsu.

Salin kod Kod adalah seperti berikut:

$(".nano").nanoScroller({ iOSNativeScrolling: true });

gelangsarMinHeight

Tetapkan ketinggian minimum elemen tatal:

Nilai lalai: 20.

Salin kod Kod adalah seperti berikut:

$(".nano").nanoScroller({ sliderMinHeight: 40 })

gelangsarMaxHeight

Tetapkan ketinggian maksimum elemen tatal:

Nilai lalai: null.

Salin kod Kod adalah seperti berikut:

$(".nano").nanoScroller({ sliderMaxHeight: 200 });

mencegahPageScrolling

Tetapkan kepada benar untuk mengelakkan halaman daripada menatal apabila kandungan bekas menatal ke atas atau bawah:

Nilai lalai: palsu.

Salin kod Kod adalah seperti berikut:

$(".nano").nanoScroller({ preventPageScrolling: true });

lumpuhkan Ubah saiz

Tetapkan kepada benar untuk mengelakkan penatal nano daripada menukar saiz. Jika anda menetapkan pilihan ini kepada benar, ingat untuk memanggil kaedah tetapan semula, jika tidak masalah pelik akan berlaku:

Nilai lalai: palsu.

Salin kod Kod adalah seperti berikut:

$(".nano").nanoScroller({ disableResize: true });

sentiasa Kelihatan

Tetapkan kepada benar untuk mematikan fungsi penyembunyian automatik apabila bar skrol berhenti:

Nilai lalai: palsu.

Salin kod Kod adalah seperti berikut:

$(".nano").nanoScroller({ alwaysVisible: true });

FlashDelay

Apabila anda mendayakan pilihan denyar, pilihan ini digunakan untuk menentukan kelewatan denyar:

Nilai lalai: 1500.

Salin kod Kod adalah seperti berikut:

$(".nano").nanoScroller({ flashDelay: 1000 });

Kelas anak tetingkap

Nama kelas bagi elemen trek bar skrol. Jika anda mengubah suainya, anda perlu membuat perubahan yang sepadan dalam fail CSS:

Lalai: 'pane nano'.

Salin kod Kod adalah seperti berikut:

$(".nano").nanoScroller({ sliderClass: 'scrollSlider' });

Kelas kandungan

Nama kelas div bekas bar skrol. Jika anda mengubah suainya, anda perlu membuat perubahan yang sepadan dalam fail CSS:

Lalai: 'kandungan nano'.

Salin kod Kod adalah seperti berikut:

$(".nano").nanoScroller({ contentClass: 'sliderContent' });

tabIndex

Tetapkan susunan kandungan boleh ditatal Apabila ditetapkan kepada -1, menggunakan kekunci tab akan melangkau kandungan:

Nilai lalai: 0.

Salin kod Kod adalah seperti berikut:

$(".nano").nanoScroller({ tabIndex: 0 });

Serasi penyemak imbas

Desktop

IE7
Firefox 3
Chrome
Safari 4
Opera 11.60
Peranti mudah alih

iOS 5 (iPhone, iPad dan iPod Touch)
iOS 4 (didatangkan dengan pemalam)
Android Firefox
Penyemak imbas asli Android 2.2/2.3 (didatangkan dengan pemalam)
Android Opera 11.6 (didatangkan dengan pemalam)
Jalankan nanoScroller dengan lebih baik dalam pelayar peranti mudah alih melalui pemalam

Anda boleh menggunakan overthrow.js untuk menjadikan nanoScroller berfungsi dengan lebih baik pada penyemak imbas mudah alih. Ia mensimulasikan limpahan CSS ( overflow: auto;/overflow: scroll; ) pada peranti mudah alih.

Untuk menggunakan overthrow, perkenalkan overthrow.js ke dalam halaman:

Salin kod Kod adalah seperti berikut:

Kemudian tambahkan kelas tumbangkan dalam div kandungan bar skrol anda:

Salin kod Kod adalah seperti berikut:

... kandungan di sini ...

Di atas adalah mengenai cara menggunakan pemalam nanoscroller saya harap anda akan menyukainya.