Bagaimana untuk melumpuhkan acara tatal atas dan bawah dalam jquery

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.

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;});

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');

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;
};

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;
};

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('mousewheel');
    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;
};

.

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!