How to disable up and down scroll events in jquery

How to disable up and down scrolling events in jquery: 1. Open the corresponding code file; 2. Determine the height of the scroll bar; 3. Through "$(document).bind('mousewheel', function(event, delta) ..." Just disable the scroll wheel event.

The operating environment of this article: Windows 7 system, jquery version 3.2.1, DELL G3 computer

How does jquery disable up and down scrolling events?

jQuery disables and enables mouse wheel events

When writing a web page, it needs to be a video that fills the whole screen when it is first opened. If you want to disable the mouse wheel event, click the down button to slide the page down through the video part, so you found the event method to disable the mouse wheel

1. Disable the mouse wheel event

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

After sliding the video, you need to use the mouse wheel to slide down, so unbind the event so that the mouse wheel can be used

2. If you want to enable the mouse wheel event, just unbind the event directly

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

But after the mouse wheel can be used, scrolling up will return to the video part. At this time, it will be very embarrassing to find that you can use the mouse wheel or the down button in the video part, so you must disable it when sliding to the video part. Mouse wheel event.

How to judge the video part

1. First judge that I am sliding up

ps: jQuery is half-baked, so there are js code and jquery in the code Code

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

2. Then determine whether the height of the scroll bar is less than the height of one screen of the page. Here is a function to obtain the height of one screen

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

, but this will infinitely disable or disable the document. Turn on the mouse wheel event, so sad

3. Get the event that the event has been bound

Use

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

If the element is already bound, the event will not be bound, or the element will not be bound. Unbind the element after binding the event

Recommended learning: "jquery video tutorial"

The above is the detailed content of How to disable up and down scroll events in jquery. For more information, please follow other related articles on the PHP Chinese website!