Shulou(Shulou.com)06/02 Report--

This article mainly introduces how jquery forbids scrolling events, the article is very detailed, has a certain reference value, interested friends must read it!

Jquery forbids scrolling events: 1, open the corresponding code file; 2, judge the height of the scroll bar; 3, through "$(document) .bind ('mousewheel', function (event, delta)." Just disable the wheel event.

This article operating environment: windows7 system, jquery3.2.1 version, DELL G3 computer

JQuery disable and enable mouse wheel event

When you write a web page, you need to open a full screen of video. If you want to disable the mouse wheel event, slide the page down over the video section by clicking the down button, so look for the event method of disabling 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 again, so unbind the event so that the mouse wheel can be used

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

$(document) .unbind ('mousewheel')

However, after the mouse wheel can be used, scrolling up will return to the video part, and it will be embarrassing to find that the video part can use either the mouse wheel or the down button, so disable the mouse wheel event when you slide to the video part.

How do you know the video part?

1. First of all, judge that I am sliding upward.

Ps:jQuery is half-baked, so there are both js code and jquery code in the code.

_ window.onscroll = function () {paired $(this). ScrollTop (); if (t > p) {console.log ("scroll up");} t = p;}

2. Then determine whether the height of the scroll bar is less than the height of a screen on the page, and add a function to get the height of a screen.

/ / get the height of the visual area of the browser window function getViewPortHeight () {return document.documentElement.clientHeight | | document.body.clientHeight;} _ window.onscroll = function () {pendant $(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;}; 但是这样就会无限的给document禁用或开启鼠标滚轮事件，so sad 3、获取事件已经绑定的事件 使用 $._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 to the event, it is not bound, or if the element is bound to the event, the element is unbound.

The above is all the content of the article "how to disable scrolling events in jquery". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.