{"id":1137,"date":"2017-04-05T07:28:12","date_gmt":"2017-04-05T14:28:12","guid":{"rendered":"http:\/\/somethingk.com\/main\/?p=1137"},"modified":"2018-06-27T11:18:54","modified_gmt":"2018-06-27T18:18:54","slug":"javascript-mousemove-scroll-event","status":"publish","type":"post","link":"https:\/\/somethingk.com\/main\/javascript-mousemove-scroll-event\/","title":{"rendered":"Javascript Mousemove Scroll Event"},"content":{"rendered":"<section id=\"text-4\" class=\"widget boka-widget widget_text amr_widget\">\t\t\t<div class=\"textwidget\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block; text-align:center;\"\r\n     data-ad-layout=\"in-article\"\r\n     data-ad-format=\"fluid\"\r\n     data-ad-client=\"ca-pub-7619916617995509\"\r\n     data-ad-slot=\"9102150708\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script><\/div>\n\t\t<\/section>\n<p>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&#8217;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 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/MouseEvent\">this<\/a> out for vanilla javascript event help and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/getElementById\">this<\/a> out for DOM selection.<\/p>\n<div class=\"snippetcpt-wrap\" id=\"snippet-1138\" data-id=\"1138\" data-edit=\"\" data-copy=\"\/main\/wp-json\/wp\/v2\/posts\/1137?snippet=a15fc3d917&#038;id=1138\" data-fullscreen=\"https:\/\/somethingk.com\/main\/code-snippets\/javascript-mousemove-scroll-event\/?full-screen=1\">\n\t\t\t\t<pre class=\"prettyprint linenums lang-javascript\" title=\"Javascript Mousemove Scroll Event\">\/\/call this function when we want to initiate the listener for moving the mouse\r\n\/\/For instance, call this function once the user starts dragging an element\r\nfunction startMouseMove() {\r\n    $document.on('mousemove', scrollWindow);\r\n}\r\n\r\nfunction scrollWindow(e) {\r\n    const y = e.pageY; \/\/This collects details on where your mouse is located vertically\r\n    const container = $('.my-container'); \/\/Replace this with the element class(.) or id(#) that needs to scroll\r\n    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\r\n    const containerBottom = container.offset().top + container.outerHeight(); \/\/Find the bottom of the container\r\n    const containerTop = container.offset().top; \/\/Find the top position of the container\r\n    const scrollPosition = container.scrollTop(); \/\/Find the current scroll position\r\n    const scrollRate = 20; \/\/increase or decrease this to speed up or slow down scrolling\r\n\r\n    if (containerBottom - y &lt; buffer) { \/\/If the bottom of the container's position minus y is less than the buffer, scroll down!\r\n      container.scrollTop(scrollPosition + scrollRate);\r\n    } else if (containerTop + y &lt; buffer) { \/\/If the top of the container's position plus y is less than the buffer, scroll up!\r\n      container.scrollTop(scrollPosition - scrollRate);\r\n    }\r\n}\r\n\r\n\/\/call this function when we want to stop the listener for moving the mouse\r\n\/\/For instance, call this function once the user drops a dragging element\r\nfunction stopMouseMove() {\r\n    $document.unbind('mousemove', scrollWindow);\r\n}\r\n\r\n<\/pre>\n\t\t\t<\/div>\n<p>Note that $document and JQuery must be declared\/injected into the controller for this to work.<\/p>\n<p>Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;t it be nice if we could use something to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[177],"tags":[610,606,611,323,608,605,609,607],"class_list":["post-1137","post","type-post","status-publish","format-standard","hentry","category-development","tag-drag","tag-event","tag-issue","tag-javascript","tag-mouse","tag-mousemove","tag-move","tag-scroll"],"_links":{"self":[{"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/posts\/1137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/comments?post=1137"}],"version-history":[{"count":2,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/posts\/1137\/revisions"}],"predecessor-version":[{"id":1245,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/posts\/1137\/revisions\/1245"}],"wp:attachment":[{"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/media?parent=1137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/categories?post=1137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/tags?post=1137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}