Bagaimana untuk Menghalang Penatalan Elemen Induk Apabila Elemen Dalaman Mencapai Sempadan Tepi?

Menghalang Penatalan Elemen Induk Apabila Elemen Dalaman Mencapai Sempadan Tepi

Dalam senario tertentu, menatal dalam elemen dalam boleh mencetuskan penatalan induk yang tidak diingini elemen apabila sempadan tepi unsur dalam dicapai. Ini boleh menjadi sangat mengecewakan apabila berinteraksi dengan kotak alat terapung atau anak tetingkap dengan kedudukan tetap.

Untuk mengelakkan penyebaran yang tidak diingini ini, acara tatal pada elemen dalam perlu dikendalikan dan mengelakkannya daripada menggelegak kepada induk. Walau bagaimanapun, hanya menggunakan event.stopPropagation() mungkin tidak mencukupi dalam semua kes.

Penyelesaian yang paling boleh dipercayai melibatkan penggunaan acara roda tetikus, yang menyediakan cara untuk menormalkan gelagat menatal merentas penyemak imbas yang berbeza. Dengan membandingkan delta roda tetikus dengan kedudukan tatal elemen dalam, kita boleh menentukan sama ada tatal telah mencapai sempadan atas atau bawah.

Jika tatal telah mencapai mana-mana terikat, kita boleh membatalkan acara dan menggunakan scrollTop(jQuery) ) kaedah untuk menetapkan kedudukan tatal kepada nilai minimum atau maksimum yang sesuai. Pendekatan ini berkesan menghalang acara daripada disebarkan kepada induk dan memastikan penatalan lancar dalam elemen dalaman.

Berikut ialah coretan kod yang melaksanakan penyelesaian ini:

<code class="javascript">$(".ToolPage").bind('mousewheel', function(e, d)  {
    var t = $(this);
    if (d > 0 && t.scrollTop() === 0) {
        e.preventDefault();
    } else {
        if (d < 0 && (t.scrollTop() == t.get(0).scrollHeight - t.innerHeight())) {
            e.preventDefault();
        }
    }
});</code>

Penyelesaian ini mengambil kira tetikus menatal ke atas dan ke bawah serta menghalang penatalan elemen induk yang tidak diingini dalam Internet Explorer dan penyemak imbas lain.

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