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 use 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 collects 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!