Bagaimana untuk Mencegah Pembiakan Tatal Elemen Induk Apabila Elemen Dalaman Mencapai Tamat?

Menghalang Pembiakan Tatal Elemen Induk Apabila Elemen Dalaman Mencapai Tamat

Apabila menatal dalam div tetap dengan limpahan, ia sering dijumpai bahawa tatal permintaan "diambil alih" oleh elemen induk, menyebabkan dokumen luar menatal ke luar kotak alat. Tingkah laku ini boleh dihentikan dengan menghalang penyebaran acara skrol.

Walaupun kaedah jQuery event.stoppropagation() mungkin kelihatan seperti penyelesaian yang sesuai, ia gagal menghalang penyebaran sepenuhnya. Sebaliknya, pendekatan yang lebih berkesan ialah mengendalikan acara roda tetikus dalam jQuery.

Acara roda tetikus menyediakan sifat wheelDelta yang menunjukkan arah dan jumlah tatal. Dengan menyemak nilai wheelDelta, anda boleh menentukan sama ada tatal akan melebihi bahagian atas atau bawah div dalam.

Untuk keserasian Internet Explorer, sifat originalEvent.detail perlu digunakan, yang mempunyai tanda terbalik dari pelayar yang lain. Mendarab butiran dengan -40 menormalkan nilai merentas semua penyemak imbas.

Kod jQuery yang disediakan menunjukkan pendekatan ini:

<code class="javascript">$(document).on('DOMMouseScroll mousewheel', '.Scrollable', function(ev) {
    // Get the div's scroll properties
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.innerHeight(),
        delta = (ev.type == 'DOMMouseScroll' ?
            ev.originalEvent.detail * -40 :
            ev.originalEvent.wheelDelta);

    // Determine if the scroll would exceed the edge conditions
    if (delta > 0 && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down past the bottom, prevent and scroll to bottom
        $this.scrollTop(scrollHeight);
        ev.stopPropagation();
        ev.preventDefault();
        return false;
    } else if (delta < 0 && delta > scrollTop) {
        // Scrolling up past the top, prevent and scroll to top
        $this.scrollTop(0);
        ev.stopPropagation();
        ev.preventDefault();
        return false;
    }
});</code>

Dengan mengendalikan acara roda tetikus dan menghalang penyebaran skrol apabila sampai ke tepi daripada div dalam, anda boleh menghalang gelagat yang tidak diingini daripada elemen induk menatal dan menyimpan skrol dalam bekas yang dikehendaki.

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