Bagaimana untuk mendapatkan jarak tatal roda tetikus dalam jquery

Dalam pembangunan web, acara roda tetikus ialah ciri yang sangat biasa dan penting. Walau bagaimanapun, apabila membangun dengan jQuery, anda mungkin menghadapi situasi di mana anda perlu mendapatkan jarak tatal roda tetikus. Dalam artikel ini, kami akan meneroka cara mendapatkan jarak tatal roda tetikus menggunakan jQuery.

Sebelum kita bermula, satu perkara perlu dijelaskan: peristiwa roda tetikus tidak berkelakuan sama dalam penyemak imbas dan sistem pengendalian yang berbeza. Oleh itu, isu keserasian perlu dipertimbangkan semasa menulis kod.

Mula-mula, mari kita lihat sintaks asas peristiwa roda tetikus:

$(selector).on('mousewheel', function(event) {
    //执行操作
});

Dalam kod di atas, selector mewakili pemilih yang perlu diikat dengan peristiwa roda tetikus, mousewheel Adalah nama acara roda tetikus. Apabila acara roda tetikus dicetuskan, fungsi yang ditentukan akan dilaksanakan.

Apabila melaksanakan fungsi, anda perlu memasukkan objek event, yang mengandungi beberapa maklumat tentang acara roda tetikus. Antaranya, atribut event.originalEvent mengandungi objek acara roda tetikus asal, yang melaluinya jarak guling roda boleh diperolehi.

Seterusnya, mari kita lihat cara mendapatkan jarak tatal roda tetikus.

Kaedah 1: Gunakan objek event.originalEvent

$(selector).on('mousewheel', function(event) {
    var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
    //执行操作
});

Dalam kod di atas, jika penyemak imbas semasa menyokong atribut wheelDelta, dapatkan nilai atribut dan tetapkan ia kepada delta pembolehubah . Jika tidak, tetapkan songsangan atribut detail kepada pembolehubah delta. Atribut detail mewakili jarak yang digulingkan oleh roda tetikus setiap kali, dan atribut wheelDelta mewakili jarak yang digulingkan oleh roda tetikus.

Perlu diingatkan bahawa nilai wheelDelta boleh positif atau negatif, manakala nilai detail hanya boleh positif atau 0. Oleh itu, untuk serasi dengan pelbagai pelayar dan sistem pengendalian, anda perlu menggunakan -event.originalEvent.detail untuk mendapatkan jarak roda skrol.

Kaedah 2: Gunakan atribut event.originalEvent.deltaY

$(selector).on('mousewheel', function(event) {
    var delta = event.originalEvent.deltaY;
    //执行操作
});

Dalam kod di atas, terus gunakan atribut deltaY untuk mendapatkan jarak roda tetikus bergolek. Perlu diingatkan bahawa atribut ini hanya disokong oleh beberapa penyemak imbas dan sistem pengendalian, jadi ia tidak boleh dipercayai.

Ringkasnya, kita boleh menggunakan dua kaedah di atas untuk mendapatkan jarak roda tetikus bergolek. Walau bagaimanapun, dalam proses pembangunan sebenar, untuk serasi dengan pelbagai pelayar dan sistem pengendalian, sebaiknya mempertimbangkan kedua-dua kaedah dan menggunakan kaedah yang lebih umum sebanyak mungkin.

Untuk meringkaskan, kod untuk mendapatkan jarak guling roda tetikus adalah seperti berikut:

$(selector).on('mousewheel', function(event) {
    var delta = 0;
    if (event.originalEvent) {
        if (event.originalEvent.wheelDelta) {
            delta = event.originalEvent.wheelDelta / 120;
        } else if (event.originalEvent.detail) {
            delta = -event.originalEvent.detail / 3;
        } else if (event.originalEvent.deltaY) {
            delta = event.originalEvent.deltaY / 120;
        }
    }
    //执行操作
});

Dalam kod di atas, kita mula-mula memulakan pembolehubah delta kepada 0, kemudian tentukan sama ada event.originalEvent atribut wujud , jika ada, tentukan lagi sama ada atribut wheelDelta, detail dan deltaY wujud, dan jika ya, hitung jarak guling roda berdasarkan nilai atribut. Akhir sekali, lakukan tindakan yang sesuai.

Saya harap artikel ini akan membantu pembaca memahami dan menguasai cara menggunakan jQuery untuk mendapatkan jarak pusingan roda tetikus.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan jarak tatal roda tetikus dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!