Javascript Mousemove Scroll Event

Sometimes you just want the window to scroll when the user moves their cursor to the top or bottom of the page. For instance, some drag and drop events block out scrolling and it is difficult for users to drag their element where they need it to go without it. Wouldn’t it be nice if we could go something to detect where the mouse is and scroll for the user automatically? Well we can! The following code insert does just that! For it, I am using angularJs events and JQuery element selection but you can use vanilla javascript to do both of these. Check this out for vanilla javascript event help and this out for DOM selection.

//call this function when we want to initiate the listener for moving the mouse
//For instance, call this function once the user starts dragging an element
function startMouseMove() {
    $document.on('mousemove', scrollWindow);
}

function scrollWindow(e) {
    const y = e.pageY; //This collectes details on where your mouse is located vertically
    const container = $('.my-container'); //Replace this with the element class(.) or id(#) that needs to scroll
    const buffer = 200; //You can set this directly to a number or dynamically find some type of buffer for the top and bottom of your page
    const containerBottom = container.offset().top + container.outerHeight(); //Find the bottom of the container
    const containerTop = container.offset().top; //Find the top position of the container
    const scrollPosition = container.scrollTop(); //Find the current scroll position
    const scrollRate = 20; //increase or decrease this to speed up or slow down scrolling

    if (containerBottom - y < buffer) { //If the bottom of the container's position minus y is less than the buffer, scroll down!
      container.scrollTop(scrollPosition + scrollRate);
    } else if (containerTop + y < buffer) { //If the top of the container's position plus y is less than the buffer, scroll up!
      container.scrollTop(scrollPosition - scrollRate);
    }
}

//call this function when we want to stop the listener for moving the mouse
//For instance, call this function once the user drops a dragging element
function stopMouseMove() {
    $document.unbind('mousemove', scrollWindow);
}

Note that $document and JQuery must be declared/injected into the controller for this to work.

Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.