Bagaimana untuk Menghalang Tatal Elemen Induk Apabila Elemen Dalaman Mencapai Had Tatalnya?

Menghalang Tatal Elemen Induk pada Sempadan Tatal Elemen Dalaman

Apabila bekerja dengan elemen terapung kedudukan tetap dengan kandungan boleh tatal, selalunya diingini untuk menghalang elemen induk daripada mengambil alih acara tatal apabila elemen dalam mencapai bahagian atas atau bawahnya. Ini boleh mengecewakan terutamanya apabila elemen dalam mempunyai julat tatal yang terhad.

Percubaan Gagal dengan Peristiwa Bubbling

Pada mulanya, diandaikan bahawa stoppropagation() boleh menyekat dengan berkesan peristiwa menggelegak ke elemen induk. Walau bagaimanapun, didapati bahawa acara itu masih disebarkan, walaupun memasuki fungsi yang ditetapkan.

Penyelesaian Pengendalian Acara Roda Tetikus

Pendekatan yang betul melibatkan pengendalian acara roda tetikus secara langsung. Dengan mengesan wheelDelta acara dan menggunakan faktor normalisasi khusus penyemak imbas, adalah mungkin untuk menentukan arah tatal (atas/bawah) dan jumlah elemen sedang ditatal.

Pengendalian Kes Tepi

Faktor 關鍵 sedang mengendalikan kes tepi di mana peristiwa roda tetikus akan menolak kedudukan tatal melebihi had elemen dalam. Dengan menyemak sama ada kedudukan tatal berada di bahagian atas atau bawah dan melaraskannya dengan sewajarnya, ia menjadi mungkin untuk menghalang elemen induk daripada menatal dalam kes ini.

Penyelesaian Berfungsi

Kod jQuery berikut menggunakan pendekatan ini:

<code class="javascript">$(".Scrollable").bind('mousewheel DOMMouseScroll', function(ev) {
    var $this = $(this),
    scrollTop = this.scrollTop,
    scrollHeight = this.scrollHeight,
    height = $this.innerHeight(),
    delta = (ev.type == 'DOMMouseScroll' ? ev.originalEvent.detail * -40 : ev.originalEvent.wheelDelta),
    up = delta > 0;

    if (!up && -delta > scrollHeight - height - scrollTop) {
        $this.scrollTop(scrollHeight);
        ev.preventDefault();
    } else if (up && delta > scrollTop) {
        $this.scrollTop(0);
        ev.preventDefault();
    }
});</code>

Dengan memintas dan menormalkan acara roda tetikus, kod ini memastikan kedudukan tatal elemen dalam kekal dalam hadnya, dengan berkesan menghalang elemen induk daripada menatal apabila sesuai.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Tatal Elemen Induk Apabila Elemen Dalaman Mencapai Had Tatalnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!