Comment désactiver les événements de défilement vers le haut et vers le bas dans jquery

Comment désactiver les événements de défilement vers le haut et vers le bas dans jquery : 1. Ouvrez le fichier de code correspondant ; 2. Déterminez la hauteur de la barre de défilement ; 3. Via "$(document).bind('mousewheel', function(event, delta)..." Désactivez simplement l'événement de la molette de défilement.

L'environnement d'exploitation de cet article : système Windows7, jquery version 3.2.1, ordinateur DELL G3

Comment désactiver les événements de défilement vers le haut et vers le bas dans jquery ?

jQuery désactive et active les événements de la molette de la souris

Lorsqu'une page Web est ouverte pour la première fois, il doit s'agir d'une vidéo qui remplit tout l'écran. Si vous souhaitez désactiver l'événement de la molette de la souris, cliquez sur le bouton bas pour le faire. la page glisse vers le bas dans la partie vidéo, j'ai donc cherché la méthode d'événement pour désactiver la molette de la souris

1 Désactivez l'événement de la molette de la souris

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

Après avoir fait glisser la vidéo, vous devez utiliser la molette de la souris pour glisser vers le bas, donc. dissociez l'événement pour que la molette de la souris puisse être utilisée

2. Si vous souhaitez activer l'événement de la molette de la souris, dissociez simplement l'événement directement. D'accord

$(document).unbind('mousewheel');

Mais une fois que la molette de la souris peut être utilisée, le défilement vers le haut reviendra à la vidéo. À ce stade, il sera très embarrassant de constater que vous pouvez utiliser la molette de la souris ou le bouton bas dans la partie vidéo, donc lorsque vous passez à la partie vidéo Pour désactiver l'événement de la molette de la souris

Comment juger le. partie vidéo

1. Jugez d'abord que je glisse vers le haut

ps : jQuery est à moitié cuit, donc il y a du code js et du code jquery dans le code

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

2 Ensuite, jugez la barre de défilement si la hauteur est inférieure à. la hauteur d'un écran de la page, voici une fonction pour obtenir la hauteur d'un écran

// 获取浏览器窗口的可视区域的高度
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;
};

Mais cela désactivera ou activera à l'infini l'événement de la molette de la souris pour le document, donc triste

Obtenez l'événement que l'événement. a été lié à

Utilisez

$._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;
};

Si l'élément a été lié à l'événement, il ne sera pas lié, ou si l'élément a lié l'événement, dissociez l'élément

Apprentissage recommandé : "Tutoriel vidéo jquery"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!