SyntaxFix

[jquery] Detect user scroll down or scroll up in jQuery

To differentiate between scroll up/down in jQuery, you could use:

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
$('#yourDiv').bind(mousewheelevt, function(e){

    var evt = window.event || e //equalize event object     
    evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible               
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF

    if(delta > 0) {
        //scroll up
    }
    else{
        //scroll down
    }   
});

This method also works in divs that have overflow:hidden.

I successfully tested it in FireFox, IE and Chrome.

Examples related to jquery

• How to make a variable accessible outside a function? • Jquery assiging class to th in a table • Please help me convert this script to a simple image slider • Highlight Anchor Links when user manually scrolls? • Getting all files in directory with ajax • Bootstrap 4 multiselect dropdown • Cross-Origin Read Blocking (CORB) • bootstrap 4 file input doesn't show the file name • Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource • how to remove json object key and value.?

Examples related to events

• onKeyDown event not working on divs in React • Detect click outside Angular component • Angular 2 Hover event • Global Events in Angular • How to fire an event when v-model changes? • Passing string parameter in JavaScript function • Capture close event on Bootstrap Modal • AngularJs event to call after content is loaded • Remove All Event Listeners of Specific Type • Jquery .on('scroll') not firing the event while scrolling

Examples related to scroll

• How to window.scrollTo() with a smooth effect • Angular 2 Scroll to bottom (Chat style) • Scroll to the top of the page after render in react.js • Get div's offsetTop positions in React • RecyclerView - How to smooth scroll to top of item on a certain position? • Detecting scroll direction • How to disable RecyclerView scrolling? • How can I scroll a div to be visible in ReactJS? • Make a nav bar stick • Disable Scrolling on Body

Examples related to bind

• Docker Error bind: address already in use • Update Angular model after setting input value with jQuery • How to remove an appended element with Jquery and why bind or live is causing elements to repeat • How to enable named/bind/DNS full logging? • What does it mean to bind a multicast (UDP) socket? • Detect user scroll down or scroll up in jQuery • Cannot assign requested address using ServerSocket.socketBind • jQuery bind/unbind 'scroll' event on $(window) • What is the use of the JavaScript 'bind' method? • Understanding ASP.NET Eval() and Bind()