JQuery / JS: detecting an attempt to scroll a user without overflowing a window to scroll to

I am working on a transition website, and although I want to use the user scroll attempt as a transition initiator, I do not want the window scroll bar to be there.

Now I just find that the user scrolls (I made the window size 1px taller than the user screen for the scroll bar, although this is what I am trying to avoid) with jquery

.scroll(function) 

and using this to go to my page, but I would like to detect an attempt to scroll the user without having to overflow the page with a pixel and thus show the scroll bar

How can I do that?

The useless feature of the patch that I know of:

The location of the window inside the outer shell and hiding the scroll bar in the overflow of the wrapper. This is a fix, not a solution. This causes the page content to be off-center, since not all browsers use the same width for their scrollbars.

+6
source share
3 answers

Look at the question . I used it as a link to make it fiddle .

Only works in Firefox :

 $('html').on ('DOMMouseScroll', function (e) { var delta = e.originalEvent.detail; if (delta < 0) { $('p').text ('You scrolled up'); } else if (delta > 0) { $('p').text ('You scrolled down'); } }); 

Works in Chrome, IE, Opera and Safari :

 $('html').on ('mousewheel', function (e) { var delta = e.originalEvent.wheelDelta; if (delta < 0) { $('p').text ('You scrolled down'); } else if (delta > 0) { $('p').text ('You scrolled up'); } }); 

You will have to bind it to an element that spans the entire screen of your browser.

+19
source

The answer from TreeTree can be simplified into a single function that supports all browsers. Combine mouse actions and DOMMouseScroll, because jQuery supports one or more event parameters (s) . However, my testing shown in () did not work in the latest Firefox. Use bind () instead. You can also combine the var delta declaration to support all browsers:

 $('html').bind('mousewheel DOMMouseScroll', function (e) { var delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail); if (delta < 0) { console.log('You scrolled down'); } else if (delta > 0) { console.log('You scrolled up'); } }); 
+10
source

Modern solution relies on wheel event (IE9 +)

 $('selector').on('wheel', function(event) { var delta = { x: event.originalEvent.deltaX, y: event.originalEvent.deltaY }; if (delta.x != 0 || delta.y != 0) { //user scrolled } }); 
0
source

Source: https://habr.com/ru/post/957202/


All Articles