Bagaimana untuk melumpuhkan acara tatal atas dan bawah dalam jquery

藏色散人
Lepaskan: 2021-11-11 11:17:29
asal
4623 orang telah melayarinya

Cara untuk melumpuhkan acara tatal atas dan bawah dalam jquery: 1. Buka fail kod yang sepadan 2. Tentukan ketinggian bar skrol 3. Melalui "$(document).bind('mousewheel', function(event, delta) ..." Hanya lumpuhkan acara roda skrol.

Bagaimana untuk melumpuhkan acara tatal atas dan bawah dalam jquery

Persekitaran pengendalian artikel ini: sistem Windows 7, versi jquery 3.2. 1, komputer DELL G3

Bagaimana untuk melumpuhkan acara menatal atas dan bawah dalam jQuery?

JQuery melumpuhkan dan mendayakan acara roda tetikus

Apabila menulis halaman web, ia mestilah video yang memenuhi keseluruhan skrin apabila ia mula-mula dibuka. Jika anda ingin melumpuhkan acara roda tetikus, klik butang ke bawah untuk meluncurkan halaman ke bawah melalui bahagian video, supaya anda menemui kaedah acara. untuk melumpuhkan roda tetikus

1. Lumpuhkan acara roda tetikus

$(document).bind('mousewheel', function(event, delta) {return false;});
Salin selepas log masuk

Selepas meluncur video, anda perlu menggunakan roda tetikus untuk menggelongsor ke bawah, jadi lepaskan acara supaya roda tetikus boleh digunakan

2 Jika anda ingin mendayakan acara roda tetikus, lepaskan sahaja acara itu terus

$(document).unbind('mousewheel');
Salin selepas log masuk

Tetapi selepas roda tetikus boleh digunakan, tatal ke atas akan kembali ke bahagian video. Pada masa ini, ia akan menjadi sangat memalukan untuk mendapati bahagian video boleh digunakan sama ada dengan roda tetikus atau butang bawah, jadi luncurkan ke bahagian video

Cara menilai bila mencapai bahagian video

1. Pertama, nilaikan saya sedang meluncur ke atas

ps: jQuery separuh masak, jadi terdapat js dalam kod itu juga

window.onscroll = function(){
  p=$(this).scrollTop();
  if(t>p){
    console.log("向上滚动");
  }
  t = p;
};
Salin selepas log masuk

2, dan kemudian menentukan sama ada ketinggian bar skrol kurang daripada ketinggian satu skrin halaman Berikut ialah fungsi untuk mendapatkan ketinggian satu skrin

// 获取浏览器窗口的可视区域的高度
function getViewPortHeight() {
  return document.documentElement.clientHeight || document.body.clientHeight;
}
window.onscroll = function(){
  p=$(this).scrollTop();
  let height = getViewPortHeight();
  if (p >= height){
    $(document).unbind('mousewheel');
  }
  if(t>p){
    if (p < height) {
        $(document).bind('mousewheel', function(event, delta) {
          return false;
        });
        $('html,body').animate({scrollTop:0},1000);
      }
    }
  }
  t = p;
};
Salin selepas log masuk

Tetapi ini Ia akan melumpuhkan atau mendayakan acara roda tetikus untuk dokumen secara tidak terhingga, sangat menyedihkan

3 Dapatkan acara yang telah diikat untuk

gunakan

$._data(obj[0],"event")
var objEvt = $._data($(document)[0], 'events');
window.onscroll = function(){
  p=$(this).scrollTop();
  let height = getViewPortHeight();
  if (p >= height){
    $(document).unbind(&#39;mousewheel&#39;);
    objEvt = $._data($(document)[0], 'events');
  }
  if(t>p){
    if (p < height) {
      if (!objEvt){
        $(document).bind('mousewheel', function(event, delta) {
          return false;
        });
        objEvt = $._data($(document)[0], 'events');
        $('html,body').animate({scrollTop:0},1000);
      }
    }
  }
  t = p;
};
Salin selepas log masuk
.

jika elemen telah terikat Jika acara ditentukan, ia tidak akan terikat, atau jika elemen terikat pada acara, lepaskan elemen

Pembelajaran yang disyorkan: "tutorial video jquery "

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan acara tatal atas dan bawah dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan